javascript - 如何创建包含动态数据的柱形图

Question

我正在使用谷歌图表，我想获得一个具有固定周期但动态值的柱形图。这是一个柱形图的示例，具有固定值，我想使用注释后代码中的变量（我想使用的变量），考虑到列和值的大小并不总是相同。

      function drawChart() {
      // Simple example
       var data = google.visualization.arrayToDataTable(
            [ ['Year', 'Example 1', 'Example 2', 'Example 3'],
          ['2004',  1000,      400, 100],
          ['2005',  1170,      460, 500],
        ]); 
        
       // variables i would like to use
       // These variables are fixed
       var periodOne = '2004';
       var periodTwo = '2005';
       
       // non-fixed variables, variables that I will receive and that will not always be the same size.
       var columns = ['Example 1', 'Example 2', 'Example 3'];
       var valuesP1 = [1000, 400, 100];
       var valuesP2 = [1170, 460, 500];
       
  
        
        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                tooltip: {legend:'none',isHtml:true, textStyle: {color: '#FF0000'}, showColorCode: true}
        };

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

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

标签： javascriptchartsgoogle-visualization

Answer 1

要动态构建，请从空白数据表开始...

// create blank data table
var data = new google.visualization.DataTable();

为期间/年添加一列...

// add period column
data.addColumn('string', 'Year');

添加动态列...

// add columns
columns.forEach(function (label) {
  data.addColumn('number', label);
});

将期间/年添加到行值...

// add period to data
valuesP1.splice(0, 0, periodOne);
valuesP2.splice(0, 0, periodTwo);

将行值添加到数据表...

// add data
data.addRow(valuesP1);
data.addRow(valuesP2);

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // These variables are fixed
  var periodOne = '2004';
  var periodTwo = '2005';

  // non-fixed variables, variables that I will receive and that will not always be the same size.
  var columns = ['Example 1', 'Example 2', 'Example 3'];
  var valuesP1 = [1000, 400, 100];
  var valuesP2 = [1170, 460, 500];

  // create blank data table
  var data = new google.visualization.DataTable();

  // add period column
  data.addColumn('string', 'Year');

  // add columns
  columns.forEach(function (label) {
    data.addColumn('number', label);
  });

  // add period to data
  valuesP1.splice(0, 0, periodOne);
  valuesP2.splice(0, 0, periodTwo);

  // add data
  data.addRow(valuesP1);
  data.addRow(valuesP2);

  // draw chart
  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
    tooltip: {legend:'none',isHtml:true, textStyle: {color: '#FF0000'}, showColorCode: true}
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart_div {
  height: 100%;
  min-height: 400px;
}

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