我在y轴上的值之间存在背景颜色问题。我希望值之间有不同的背景颜色。
google.load("visualization", "1", { packages: ['corechart', 'line'] });
var abChartCtrl = angular.module('abChartCtrl', []);
abChartCtrl.controller('abctrl', ['$scope', function ($scope) {
var data = new google.visualization.DataTable();
data.addColumn('number', '');
data.addColumn('number', '');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80], [69, 70], [79, 60]
]);
var options = {
width: '100%',
height: '100%',
chartArea: {
width: '90%',
height: '80%',
backgroundColor: '#E4E4E4',
},
legend: {
position: 'none'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);}]);
我的图表显示:
我想要这样的事情:
答案 0 :(得分:0)
这是答案
var dataTable = new google.visualization.DataTable({
cols: [
{ label: 'Time', type: 'number' },
{ label: 'Low', type: 'number' },
{ label: 'LowAvg', type: 'number' },
{ label: 'Avg', type: 'number' },
{ label: 'AvgHigh', type: 'number' },
{ label: 'High', type: 'number' },
{ label: 'Test', type: 'number' }
],
rows: [
{ c: [{ v: 0 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 0 }] },
{ c: [{ v: 5 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 24 }] },
{ c: [{ v: 10 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 20 }] },
{ c: [{ v: 15 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 48 }] },
{ c: [{ v: 20 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 53 }] },
{ c: [{ v: 25 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 81 }] },
{ c: [{ v: 30 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 33 }] },
{ c: [{ v: 40 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 66 }] },
{ c: [{ v: 45 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 50 }] },
{ c: [{ v: 50 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 75 }] },
{ c: [{ v: 55 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 38 }] },
{ c: [{ v: 60 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 40 }] },
{ c: [{ v: 65 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 65 }] },
{ c: [{ v: 70 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 80 }] },
{ c: [{ v: 80 }, { v: 60 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 10 }, { v: 45 }] }
]
});
var options = {
width: '100%',
height: '100%',
chartArea: {
width: '90%',
height: '80%',
},
legend: {
position: 'none'
},
/* hAxis: {
ticks: [0, 15, 30, 45, 60],
}, */
isStacked: true,
series: {
// Low
0: {
areaOpacity: 0.6,
color: '#959595',
visibleInLegend: false
},
// LowAvg
1: {
areaOpacity: 0.6,
color: '#00BFF3',
visibleInLegend: false
},
// Avg
2: {
areaOpacity: 0.6,
color: '#3AB54A',
visibleInLegend: false
},
3: {
areaOpacity: 0.6,
color: '#FEF568',
visibleInLegend: false
},
// High
4: {
areaOpacity: 0.6,
color: '#ED1B24',
visibleInLegend: false
},
// Test - color of chart
5: {
color: '#01579B',
type: 'line'
}
},
seriesType: 'area',
vAxis: {
ti1cks: [0, 25, 50, 75, 100]
}
};