javascript - 通过 Google Charts 在柱形图中添加描述？

Question

我想用表格中的实际文本替换下面屏幕截图中的“步骤 1”。

我认为工具提示可能会有所帮助，但还没有弄明白......这是我的代码:

initGoolgeChart : function() {
    // Load the Visualization API and the corechart package.
    google.charts.load("current", {"packages": ["bar"] });

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(MigrationMonitor.drawCharts);
},

drawCharts : function() {
    if(MigrationMonitor.dynamicFields.chartData != null && MigrationMonitor.dynamicFields.chartData.length > 0) {

        var data = google.visualization.arrayToDataTable(MigrationMonitor.dynamicFields.chartData);

        // won't work, don't know how i can add steps here then...
        // data.addColumn({type:"string", role: "tooltip"});

        // // Set chart options
        var options = {
            chart : {
                title : "Build: " + MigrationMonitor.dynamicFields.chartTitle[1] + " VS " + MigrationMonitor.dynamicFields.chartTitle[2]
            }
        };

        var chart = new google.charts.Bar(document.getElementById('charDiv'));
        chart.draw(data, options);
    }
}

Answer 1

使用对象表示法提供值(v:)和格式化值(f:)
对于第一列

工具提示默认显示格式化值(f:)

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Step', 'Build: 22850', 'Build: 22852'],
      [{v: 'Step 1', f: 'Pre-migration tasks'}, {v: 66, f: '66 (s)'}, {v: 67, f: '67 (s)'}],
      [{v: 'Step 2', f: 'Dropping SP, Triggers, Views, and Functions'}, {v: 6, f: '6 (s)'}, {v: 7, f: '7 (s)'}]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.charts.Bar(container);
    chart.draw(data);
  },
  packages: ['bar']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

如果您无法使用对象表示法提供值，或者它太不方便，
使用 setFormattedValue 方法，

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Step', 'Build: 22850', 'Build: 22852'],
      ['Step 1', 66, 67],
      ['Step 2', 6, 7]
    ]);

    var formatNumber = new google.visualization.NumberFormat({
      pattern: '0 (s)'
    });
    formatNumber.format(data, 1);

    for (var i = 0; i < data.getNumberOfRows(); i++) {
      switch (data.getValue(i, 0)) {
        case 'Step 1':
          data.setFormattedValue(i, 0, 'Pre-migration tasks');
          break;

        case 'Step 2':
          data.setFormattedValue(i, 0, 'Dropping SP, Triggers, Views, and Functions');
          break;
      }
    }

    var container = document.getElementById('chart_div');
    var chart = new google.charts.Bar(container);
    chart.draw(data);
  },
  packages: ['bar']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>