如何使用动态数据创建柱形图

如何解决如何使用动态数据创建柱形图

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

      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 3'];
       var valuesP1 = [1000,100];
       var valuesP2 = [1170,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>

解决方法

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

// 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,periodOne);
valuesP2.splice(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,periodOne);
  valuesP2.splice(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>