javascript - 自定义时工具提示未按预期显示

Question

我正在研究 angularjs 谷歌图表。我想自定义工具提示。 在我的工具提示中，我想显示多个系列数据以及一些文本，如演示中所示 https://plnkr.co/edit/orQchHKMeErVesXW2M0u?p=preview 我想在工具提示中显示的值旁边查看值的图例和标题，如 https://plnkr.co/edit/6iw39IRFY7mwdQzjAVR6?p=preview 中所示

在上面的 plunker 中，我没有自定义工具提示，因此它按预期工作，但是当我自定义工具提示中的文本时，如第一个 plunker 链接所示(用 Jan - July 替换了 First Series ...)，工具提示是未按预期显示。 有什么建议吗？

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");
});

Answer 1

如果你使用 continuous axis ('number', 'date', 'timeofday', etc...) 第一列，

您可以提供工具提示值作为格式化值 (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>

更新

将上述变化放在 Angular ......

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"}]}
  ];