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

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>

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>