我是谷歌排行榜的新手。我想绘制一条红线,如下图所示。 请帮我解决这个问题。
我在上面的图片中显示了我的要求线。 怎么做?请帮我。我用了Combo Chart。 我的代码如下。
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
[ 'Time', 'Col1',{ role: 'style' }, 'col2'],
[ '09:50', 1000,'color: #B0C4DE', null],
[ '10:00', 1200, 'color: #EEE8AA',1400],
[ '10:30', 1500, 'color: #EEE8AA',1400],
[ '11:00', 1300, 'color: #B0C4DE',null],
[ '11:30', 1200, 'color: #B0C4DE',null],
[ '12:00', 1300, 'color: #B0C4DE',null],
[ '12:30', 1200, 'color: #EEE8AA',1200],
[ '01:00', 1300, 'color: #EEE8AA',1200],
[ '01:30', 1600, 'color: #B0C4DE',null]]);
var options = {
width : 1001,
height : 500,
vAxis : {
format : '#[kw]',
viewWindowMode:'explicit',
viewWindow: {
max:3000,
min:0
},
ticks: [0, 1000, 2000, 3000]
},
seriesType : "bars",
series : {
1 : {
type : "line"
}
},
legend : {
position : 'none'
},
colors : ['#ff0000','#008000']
};
var chart = new google.visualization.ComboChart(document
.getElementById('number_format_chart'));
chart.draw(data, options);
}
答案 0 :(得分:0)
您已经对绿色行有正确的想法,
这里有 red 行的几个选项......
为了获得升线,
必须在两点之间添加新行。
'string'
值) - 'timeofday'
值) - ColumnChart
更难以格式化(imo)。 见下面的工作片段......
google.charts.load('current', {
callback: function () {
var seriesOptions = {
type : "line"
};
new google.visualization.ComboChart(document.getElementById('chart_div0')).
draw(
google.visualization.arrayToDataTable([
[ 'Time', 'Col1', { role: 'style' }, 'Col2', 'Col3'],
[ '09:50', 1000, 'color: #B0C4DE', null, null],
[ '10:00', 1200, 'color: #EEE8AA', 1400, 1600],
[ null, null, 'color: #EEE8AA', 1400, 1600],
[ null, null, 'color: #EEE8AA', 1400, 1700],
[ '10:30', 1500, 'color: #EEE8AA', 1400, 1700],
[ '11:00', 1300, 'color: #B0C4DE', null, null],
[ '11:30', 1200, 'color: #B0C4DE', null, null],
[ '12:00', 1300, 'color: #B0C4DE', null, null],
[ '12:30', 1200, 'color: #EEE8AA', 1200, 1400],
[ null, null, 'color: #B0C4DE', 1200, 1400],
[ null, null, 'color: #B0C4DE', 1200, 1500],
[ '01:00', 1300, 'color: #EEE8AA', 1200, 1500],
[ '01:30', 1600, 'color: #B0C4DE', null, null]
]),
{
width : 1001,
height : 500,
vAxis : {
format : '#[kw]',
viewWindowMode:'explicit',
viewWindow: {
max:3000,
min:0
},
ticks: [0, 1000, 2000, 3000]
},
seriesType : "bars",
series : {
1 : seriesOptions,
2 : seriesOptions
},
legend : {
position : 'none'
},
colors : ['transparent', '#008000', '#ff0000']
}
);
new google.visualization.ComboChart(document.getElementById('chart_div1')).
draw(
google.visualization.arrayToDataTable([
[ 'Time', 'Col1', { role: 'style' }, 'Col2', 'Col3'],
[ [09,50,00], 1000, 'color: #B0C4DE', null, null],
[ [10,00,00], 1200, 'color: #EEE8AA', 1400, 1600],
[ [10,15,00], null, 'color: #EEE8AA', 1400, 1600],
[ [10,15,00], null, 'color: #EEE8AA', 1400, 1700],
[ [10,30,00], 1500, 'color: #EEE8AA', 1400, 1700],
[ [11,00,00], 1300, 'color: #B0C4DE', null, null],
[ [11,30,00], 1200, 'color: #B0C4DE', null, null],
[ [12,00,00], 1300, 'color: #B0C4DE', null, null],
[ [12,30,00], 1200, 'color: #EEE8AA', 1200, 1400],
[ [12,45,00], null, 'color: #EEE8AA', 1200, 1400],
[ [12,45,00], null, 'color: #EEE8AA', 1200, 1500],
[ [13,00,00], 1300, 'color: #EEE8AA', 1200, 1500],
[ [13,30,00], 1600, 'color: #B0C4DE', null, null]
]),
{
bar: {
gap: 10
},
width : 1001,
height : 500,
hAxis : {
ticks: [[09,30,00], [09,50,00], [10,00,00], [10,30,00], [11,00,00], [11,30,00], [12,00,00], [12,30,00], [13,00,00], [13,30,00], [14,00,00]]
},
vAxis : {
format : '#[kw]',
viewWindowMode:'explicit',
viewWindow: {
max:3000,
min:0
},
ticks: [0, 1000, 2000, 3000]
},
seriesType : "bars",
series : {
1 : seriesOptions,
2 : seriesOptions
},
legend : {
position : 'none'
},
colors : ['transparent', '#008000', '#ff0000']
}
);
},
packages: ['corechart']
});
div {
text-align: center;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Discrete Axis</div>
<div id="chart_div0"></div>
<div>Continuous Axis</div>
<div id="chart_div1"></div>