在Google Chart Line Graph中显示多行,可以通过以下步骤实现:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
google.visualization.LineChart
类创建一个新的图表实例,并将其绑定到HTML文件中的一个元素上。最后,调用draw()
方法绘制图表。function drawChart() {
var data = new google.visualization.DataTable();
// 添加数据列
data.addColumn('string', 'X轴');
data.addColumn('number', 'Y轴1');
data.addColumn('number', 'Y轴2');
// 添加数据行
data.addRows([
['数据点1', 5, 7],
['数据点2', 10, 12],
['数据点3', 8, 6],
// 添加更多数据行...
]);
var options = {
// 配置选项,如图表标题、轴标签等
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<div id="chart_div"></div>
通过以上步骤,你可以在Google Chart Line Graph中显示多行数据。根据你的需求,可以根据数据集的不同添加更多的数据系列,并根据需要调整图表的配置选项。
领取专属 10元无门槛券
手把手带您无忧上云