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



angularjs charts (1)

यदि आप पहले स्तंभ के लिए एक निरंतर अक्ष ( '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");
});




google-visualization