Question

I'm using Google chart to create a WaterFall chart and trying to show a tool tip (not the default). It works find in column graphs.

I'm trying to avoid using createCustomHTMLContent. Any way do this without creating custom HTML content?

        var data = google.visualization.arrayToDataTable([
          ['Sales 1', 0, 0, 38000, 38000, 'Tool Tip 1'],
          ['Sales 2', 38000, 38000, 55000, 55000, 'Tool Tip 2'],
          ['Sales 3', 55000, 55000, 77000, 77000, 'Tool Tip 3'],
          ['Exp 1', 77000, 77000, 66000, 66000, 'Tool Tip 4'],
          ['Exp 2', 66000, 66000, 22000, 22000, 'Tool Tip 5'],
          ['Profit', 0, 0, 22000, 22000, 'Tool Tip 6']
        ], true);

        var options = {
        legend: 'none',
            bar: { groupWidth: '100%' },
        title: title,
        candlestick: {
            fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
            risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
        }};

        var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
        chart.draw(data, options);

Answer 1

工具提示栏需要如此定义 {type: 'string', role: 'tooltip'}

无法从arrayToDataTable定义。

此处，列在新的DataTable中定义，之后添加的行。

＆＃13;

google.charts.load('current', {
  callback: drawVisualization,
  packages: ['corechart']
});

function drawVisualization() {
  var dataRows = [
    ['Sales 1', 0, 0, 38000, 38000, 'Tool Tip 1'],
    ['Sales 2', 38000, 38000, 55000, 55000, 'Tool Tip 2'],
    ['Sales 3', 55000, 55000, 77000, 77000, 'Tool Tip 3'],
    ['Exp 1', 77000, 77000, 66000, 66000, 'Tool Tip 4'],
    ['Exp 2', 66000, 66000, 22000, 22000, 'Tool Tip 5'],
    ['Profit', 0, 0, 22000, 22000, 'Tool Tip 6']
  ];

  var data = new google.visualization.DataTable({
    cols: [
      {id: 'Category', type: 'string'},
      {id: 'Min', type: 'number'},
      {id: 'Initial', type: 'number'},
      {id: 'Final', type: 'number'},
      {id: 'Max', type: 'number'},
      {id: 'Tooltip', type: 'string', role: 'tooltip'}
    ]
  });
  data.addRows(dataRows);

  var options = {
  legend: 'none',
      bar: { groupWidth: '100%' },
  title: 'title',
  candlestick: {
      fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
      risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
  }};

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

＆＃13;

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

＆＃13;

Adding Tool Tips To Waterfall Google Chart

1 个答案: