Question

我想替换＆＃34;步骤1＆＃34;在下面的屏幕截图中，使用表格中的实际文本。

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

error TS2307: Cannot find module '!!raw-loader!./demo'.

Answer 1

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

工具提示默认显示格式化值（f:）

请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

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

＆＃13;

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

请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

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

＆＃13;

Answer 2

如果您可以迭代数据并添加到空白的google.visualization.DataTable

，则可以轻松完成此操作

只需像这样初始化： var data = new google.visualization.DataTable（）

然后你可以添加这样的列： data.addColumn（'number'，'time'）;

对于将用于工具提示的列： data.addColumn（{'type'：'string'，'role'：'tooltip'，'p'：{'html'：true}}）;

然后您可以向此空白DataTable添加行，如下所示： dataTable.addRows（[[10，'tooltip for 10']，[20，'tooltip for 20']]）;

你的MigrationMonitor.dynamicFields.chartData可能适合那里而不需要迭代。

如果你想制作工具提示HTML，还有一个选项工具提示：{isHtml：true}。

以下链接详细说明了这一点 https://developers.google.com/chart/interactive/docs/customizing_tooltip_content

在Google Charts的柱形图中添加说明？

2 个答案: