1

我正在使用谷歌图表 api 来获取一些图形。以下是我正在使用的代码

 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      1170],
          ['2006',  660,       1120],
          ['2007',  1030,      540],
	  ['2008',  660,       660],
          ['2009',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

其中两条线相互交叉两次，因此它只显示一条线的信息。有什么方法可以让我在光标位于该点时显示两条线的信息？

4

1 回答 1

2

尝试使用...

focusTarget: 'category'

在配置选项中，请参见以下示例...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      1170],
      ['2006',  660,       1120],
      ['2007',  1030,      540],
      ['2008',  660,       660],
      ['2009',  1030,      540]
    ]);

    new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, {
      focusTarget: 'category',
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    });
  },
  packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

另一种选择是提供您自己的工具提示

请参阅以下示例，非常基本，但显示了逻辑...

在每个值列之后添加一个工具提示列

然后用 html 字符串填充工具提示列

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      1170],
      ['2006',  660,       1120],
      ['2007',  1030,      540],
      ['2008',  660,       660],
      ['2009',  1030,      540]
    ]);

    // add tooltip columns
    data.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}});
    data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});

    // build tooltip values
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      data.setValue(i, 2, getTooltip(i, 1, 3));
      data.setValue(i, 4, getTooltip(i, 3, 1));
    }

    // set tooltip content
    function getTooltip(row, col1, col2) {
      var tooltip = '<div class="tooltipLabel">' + data.getValue(row, 0) + '</div>';
      tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col1) + '</span>: ' + data.getValue(row, col1) + '</div>';
      if (data.getValue(row, col1) === data.getValue(row, col2)) {
        tooltip += '<div><span class="tooltipLabel">' + data.getColumnLabel(col2) + '</span>: ' + data.getValue(row, col2) + '</div>';
      }
      return tooltip;
    }

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {
      curveType: 'function',
      legend: { position: 'bottom' },
      pointSize: 5,
      tooltip: {
        isHtml: true
      }
    });
  },
  packages: ['corechart']
});
div {
  padding: 6px 6px 6px 6px;
  font-name: Arial;
}

.tooltipLabel {
  font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

于 2016-06-08T18:45:09.303 回答