Кнопка Google Charts - PullRequest
Новая
       6

Кнопка Google Charts

1 голос
/ 05 марта 2020

Я пытаюсь нарисовать Google Chart, который меняет значения при нажатии кнопки. Я попробовал следующий код, но он не работал.

Как заставить кнопку работать и как изменить текст с «gravimetri c» на «volumetri c»?

Загрузка библиотеки диаграмм: 

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

1 Ответ

0 голосов
/ 05 марта 2020

не был уверен, откуда отсюда вызывается функция 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>
...