Google 图表按钮

Question

我正在尝试绘制一个 Google 图表，它会在单击按钮时更改值。我尝试了下面的代码，但是没有用。

如何使该按钮起作用以及如何使其将文本从 "gravimetric " 更改为 "volumetric"？

正在加载图表库：

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

我的数据是这样的：

// Chart Data
    var rowData1 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
                    ['1000', '217', 'Gravimetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
                    ['1500', '203', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];
    var rowData2 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
                    ['800', '190', 'Volumetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
                    ['1200', '150', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];

var data = [];
    data[0] = google.visualization.arrayToDataTable(rowData1);
    data[1] = google.visualization.arrayToDataTable(rowData2);

    var current = 0;
    // Create and draw the visualization.
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button.value = 'Switch to ' + (current ? 'Gravimetric' : 'Volumetric') + ' Densities';
          });
      options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';

      chart.draw(data[current], options);
    }
    drawChart();

    button.onclick = function() {
      current = 1 - current;
      drawChart();
    }

HTML 看起来像：

<body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
    <div style="text-align: center;"><button id="b1" style="background: #ea5b0c; color: #ffffff; font-family: 'Big John'; font-size: 18;">Click</button></div>
  </body>

Answer 1

不确定从此处调用 drawChart 函数的位置...

google.charts.setOnLoadCallback(drawChart);

为了更简单，只需使用 promise load 语句 returns。

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  ... add code here ...
});

接下来，options对象在创建之前就被使用了，这里...

options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';

应该是……

var options = {};
options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';

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

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  // Chart Data
  var rowData1 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
                  ['1000', '217', 'Gravimetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
                  ['1500', '203', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];
  var rowData2 = [[{role: 'domain',type: 'number'}, {role: 'data',type: 'number'}, {role: 'tooltip', type: 'string', p: {html:true}}],
                  ['800', '190', 'Volumetric<strong style="color:#ea5b0c; font-family:Big John">Samsung 40T</strong>'],
                  ['1200', '150', '<p><strong style="color:#ea5b0c; font-family:Big John">Sony VTC6</strong></p>']];

  var data = [];
  data[0] = google.visualization.arrayToDataTable(rowData1);
  data[1] = google.visualization.arrayToDataTable(rowData2);

  var current = 0;
  // Create and draw the visualization.
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  var button = document.getElementById('b1');
  function drawChart() {
    // Disabling the button while the chart is drawing.
    button.disabled = true;
    google.visualization.events.addListener(chart, 'ready', function() {
      button.disabled = false;
      button.value = 'Switch to ' + (current ? 'Gravimetric' : 'Volumetric') + ' Densities';
    });
    var options = {};
    options['title'] = (current ? 'Volumetric' : 'Gravimetric') + ' Densities';

    chart.draw(data[current], options);
  }
  drawChart();

  button.onclick = function() {
    current = 1 - current;
    drawChart();
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<div style="text-align: center;"><button id="b1" style="background: #ea5b0c; color: #ffffff; font-family: 'Big John'; font-size: 18;">Click</button></div>

Google 图表按钮

Google Charts Button

charts

button

google-visualization