javascript - अनुकूलित के अनुसार टूलटिप अपेक्षित नहीं दिखाया गया है




angularjs charts google-visualization (2)

यदि आप पहले स्तंभ के लिए एक निरंतर अक्ष ( 'number' , 'date' , 'timeofday' , आदि ...) का उपयोग करते हैं,

आप टूलटिप मान को स्वरूपित मान ( f: :) के रूप में प्रदान कर सकते हैं

{"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},

तो अक्ष लेबल के लिए hAxis.ticks उपयोग करें
लेबल मान सेट करने के लिए समान ऑब्जेक्ट नेशन का उपयोग करें

hAxis: {
  ticks: [
    {"v": 0, "f":"First Series"},
    {"v": 1, "f":"Second Series"},
    {"v": 2, "f":"Third Series"}
  ]
},

अन्य विकल्प निम्न स्निपेट में शामिल हैं,
असतत अक्ष ( 'string' ) के समान चार्ट को प्रारूपित करने के लिए

google.load('visualization', '1.1', {
  packages: ['corechart'],
  callback: drawChart
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id": 'title', "label": 'title', "type": "number"},
      {"id": "count", "label": "count", "type": "number"},
      {"id": "pizza", "label": "Pizza", "type": "number"},
      {"id": "softdrink", "label": "Softdrink", "type": "number"}
    ],
    "rows": [
      {"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},
      {"c":[{"v": 1, "f":"Aug - Sept"},{"v":70},{"v":"35"},{"v":"35"}]},
      {"c":[{"v": 2, "f":"Oct - Dec"},{"v":80},{"v":"40"},{"v":"40"}]}
    ]
  });

  options = {
    title: 'title',
    isStacked: true,
    focusTarget: 'category',
    hAxis: {
      baselineColor: 'transparent',
      gridlines: {
        color: 'transparent'
      },
      slantedText: false,
      ticks: [
        {"v": 0, "f":"First Series"},
        {"v": 1, "f":"Second Series"},
        {"v": 2, "f":"Third Series"}
      ]
    },
    tooltip: {
      text: 'value'
    }
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

अद्यतन करें

कोणीय में उपरोक्त परिवर्तनों को रखकर ...

var createChart = function (rows, label) {
      return {
          "type": "ColumnChart",
          "data": {
              "cols": [
                  {"id": label, "label": label, "type": "number"},
                  {"id": "count", "label": "count", "type": "number"},
                  {"id": "pizza", "label": "Pizza", "type": "number"},
                  {"id": "softdrink", "label": "Softdrink", "type": "number"}
              ],
              "rows": rows
          },
          "options": {
            title: 'title',
            isStacked: true,
            focusTarget: 'category',
            hAxis: {
              baselineColor: 'transparent',
              gridlines: {
                color: 'transparent'
              },
              slantedText: false,
              ticks: [
                {"v": 0, "f":"First Series"},
                {"v": 1, "f":"Second Series"},
                {"v": 2, "f":"Third Series"}
              ]
            },
            tooltip: {
              text: 'value'
            }
          }
      }
  };

var data = [
    {"c":[{"v": 0, "f":"Jan - July"},{"v":63},{"v":"30"},{"v":"33"}]},
    {"c":[{"v": 1, "f":"Aug - Sept"},{"v":70},{"v":"35"},{"v":"35"}]},
    {"c":[{"v": 2, "f":"Oct - Dec"},{"v":80},{"v":"40"},{"v":"40"}]}
  ];

मैं कोणीय Google चार्ट पर काम कर रहा हूं मैं टूलटिप को कस्टमाइज़ करना चाहता हूं अपने टूलटिप में मैं कई श्रृंखला डेटा दिखाने के साथ-साथ डेमॉन https://plnkr.co/edit/orQchHKMeErVesXW2M0u?p=preview में दिखाए गए कुछ पाठ के रूप में मैं पौराणिक कथा और बगल के मूल्य का शीर्षक देखना चाहता हूं https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview में दिखाए गए अनुसार टूलटिप में प्रदर्शित मान

उपरोक्त plunker में, मैं टूलटिप को कस्टमाइज़ नहीं कर रहा हूं और इसलिए यह अपेक्षा के अनुरूप काम करता है, लेकिन जब मैं पहली बार प्लंकर लिंक में दिखाया गया टूल टिप में टेक्स्ट को कस्टमाइज़ करता हूं (पहली सीरीज जनवरी-जुलाई के साथ ...) टूलटिप के रूप में नहीं दिखाया गया है अपेक्षित होना। कोई सलाह?

जेएस कोड:

'use strict';

angular.module('google-chart-example', ['googlechart']).controller("MainCtrl", function ($scope) {

  var createChart = function (rows, label) {
        return {
            "type": "ColumnChart",
            "data": {
                "cols": [
                    {"id": label, "label": label, "type": "string"},toolTipVar,
                    {"id": "count", "label": "count", "type": "number"},
                    {"id": "pizza", "label": "Pizza", "type": "number"},
                    {"id": "softdrink", "label": "Softdrink", "type": "number"}
                ],
                "rows": rows
            },
            "options": {
                "title": label,
                "isStacked": "true",
                 focusTarget: 'category',
                // "displayExactValues": true
               "tooltip": {'text' : 'value' }, 
            }
        }
    };

    var toolTipVar = {
        role: "tooltip",
        type: "string",
        p: {
            'html': true
        }
    };

  var data = [
        {"c":[{"v":"First Series"},{"v":"Jan - July" + "\n" + "63" + "\n" + "30" + "\n" + "33"},{"v":63},{"v":"30"},{"v":"33"}]},
        {"c":[{"v":"Second series"},{"v":"Aug - Sept" + "\n" + "70" + "\n" + "35" + "\n" + "35"},{"v":70},{"v":"35"},{"v":"35"}]},
        {"c":[{"v":"Third series"},{"v":"Oct - Dec" + "\n" + "80" + "\n" + "40" + "\n" + "40"},{"v":80},{"v":"40"},{"v":"40"}]}

    ];
  $scope.myChart = createChart(data, "Data Series");
});

@ क्रिस एस ने var और no var बीच व्यावहारिक अंतर (और खतरे) को प्रदर्शित करने का एक अच्छा उदाहरण दिया। यहां एक और है, मुझे यह विशेष रूप से खतरनाक लगता है क्योंकि अंतर केवल एक असीमित वातावरण में दिखाई देता है ताकि यह परीक्षण के दौरान आसानी से पर्ची कर सके।

जैसा कि आप निम्न स्निपेट आउटपुट ["text"] अपेक्षा करेंगे:

function var_fun() {
  let array = []
  array.push('text')
  return array
}

console.log(var_fun())

तो निम्न स्निपेट (लापता let से पहले लापता नोट करें):

function var_fun() {
  array = []
  array.push('text')
  return array
}

console.log(var_fun())

डाटा मैनिपुलेशन को अतुल्यकालिक रूप से निष्पादित करना अभी भी एक ही निष्पादक के साथ एक ही परिणाम उत्पन्न करता है:

function var_fun() {
  array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

var_fun().then(result => {console.log(result)})

लेकिन कई लोगों के साथ अलग व्यवहार करता है:

function var_fun() {
  array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

[1,2,3].forEach(i => {
  var_fun().then(result => {console.log(result)})
})

हालांकि प्रयोग करना:

function var_fun() {
  let array = [];
  return new Promise(resolve => resolve()).then(() => {
    array.push('text')
    return array
  })
}

[1,2,3].forEach(i => {
  var_fun().then(result => {console.log(result)})
})







javascript angularjs charts google-visualization