javascript - サンプル - カスタマイズ時にツールチップが期待どおりに表示されない



tippy.js github (1)

最初の列に連続軸'number''date''timeofday'など)を使用すると、

ツールチップの値をフォーマットされた値( f: :)として指定できます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"}]}
  ];

https://src-bin.com

私はangularjsのGoogleグラフに取り組んでいます。 私はツールチップをカスタマイズしたい。 私のツールチップでは、デモに示されているように、複数のシリーズデータとテキストを表示したいと思います。https://plnkr.co/edit/orQchHKMeErVesXW2M0u?p=preview凡例とその横の値のタイトルを表示したいツールチップに表示される値は、 https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview

上記のプランナーでは、私はツールチップをカスタマイズしていないので、期待通りに機能しますが、最初のプランナーリンク(最初のシリーズを1月〜7月に置き換えています)に示すようにツールチップのテキストをカスタマイズしたとき、ツールチップは期待される。 どんなアドバイスですか?

jsコード:

'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