文章/答案/技术大牛

发布

社区首页 >问答首页 >谷歌图表按钮

问谷歌图表按钮
EN

Stack Overflow用户

提问于 2020-03-05 13:16:25

回答 1查看 405关注 0票数 1

我试图绘制一个谷歌图表，这改变了值时，点击一个按钮。我尝试了下面的代码，但没有起作用。

我如何使按钮工作，如何使它从“重量”改为“体积”文本？

加载图表库：

<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>

charts

google-visualization

button

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-05 13:30:48

不知道drawChart函数在哪里被调用.

google.charts.setOnLoadCallback(drawChart);

为了简化操作，只需使用load语句返回的承诺即可。

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60546266

复制

相似问题

问谷歌图表按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌图表按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌图表按钮
EN