我需要绘制包含多条线的线图，但是该图也是双Y型图。在我的情况下，它可以是3条或更多条线，其中每条线都属于左或右Y轴。
因此，请看documentation
中的example / jsfiddle google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addRows([
[new Date(2014, 0), -.5, 5.7],
[new Date(2014, 1), .4, 8.7],
[new Date(2014, 2), .5, 12],
[new Date(2014, 3), 2.9, 15.3],
[new Date(2014, 4), 6.3, 18.6],
[new Date(2014, 5), 9, 20.9],
[new Date(2014, 6), 10.6, 19.8],
[new Date(2014, 7), 10.3, 16.6],
[new Date(2014, 8), 7.4, 13.3],
[new Date(2014, 9), 4.4, 9.9],
[new Date(2014, 10), 1.1, 6.6],
[new Date(2014, 11), -.2, 4.5]
]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
}
目前还不清楚我该怎么做。我尝试添加另一个data.addRows([...])，但效果不理想chart
有什么建议吗？
答案 0 :(得分：1)
不确定我是否完全理解这个问题。
但是如果您只想添加其他行，
您需要向数据表中添加其他列。
对于添加的每列，新的线或系列将添加到图表中。
下面的数据表将生成四行。
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Line 1 - Series 0");
data.addColumn('number', "Line 2 - Series 1");
data.addColumn('number', "Line 3 - Series 2");
data.addColumn('number', "Line 4 - Series 3");
，您可以控制每条线属于哪个轴，
通过设置axis名称。
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'},
2: {axis: 'Temps'},
3: {axis: 'Daylight'}
},
在这里，第一行或系列0将属于左轴，即温度。
右边的第二个（系列1）（日光），依此类推。
请参阅以下工作片段...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Line 1 - Series 0");
data.addColumn('number', "Line 2 - Series 1");
data.addColumn('number', "Line 3 - Series 2");
data.addColumn('number', "Line 4 - Series 3");
data.addRows([
[new Date(2014, 0), -.5, 5.7, -1, 10],
[new Date(2014, 1), .4, 8.7, -1, 10],
[new Date(2014, 2), .5, 12, -1, 10],
[new Date(2014, 3), 2.9, 15.3, -1, 10],
[new Date(2014, 4), 6.3, 18.6, -1, 10],
[new Date(2014, 5), 9, 20.9, -1, 10],
[new Date(2014, 6), 10.6, 19.8, -1, 10],
[new Date(2014, 7), 10.3, 16.6, -1, 10],
[new Date(2014, 8), 7.4, 13.3, -1, 10],
[new Date(2014, 9), 4.4, 9.9, -1, 10],
[new Date(2014, 10), 1.1, 6.6, -1, 10],
[new Date(2014, 11), -.2, 4.5, -1, 10]
]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'},
2: {axis: 'Temps'},
3: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 0},
3: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>