我有一个烦人的问题。我正在创建一个区域间隔的谷歌折线图。一旦将间隔列设为role: 'interval'
,图表就会在我的线图内创建某种左右边界。我该如何摆脱呢?
这是我的图表代码:
chartType: 'LineChart',
dataTable: {
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', p: {role: 'interval'}},
{id: 'i1', type: 'number', p: {role: 'interval'}}
],
rows: []
},
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindowMode: 'maximized'
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: blauw1,
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: blauw5},
fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
colors: [blauw1],
areaOpacity: 0.0,
}
};```
This is how my chart look's like when the 2 interval-columns don't have the ```role: 'interval'``` added:
[without role: interval][1]
This is how my chart look's like when the 2 interval-columns have the ```role: 'interval'``` added:
[with role: interval][2]
[1]: https://i.stack.imgur.com/zpT3D.png
[2]: https://i.stack.imgur.com/0x3XG.png
答案 0 :(得分:2)
代替使用选项-> UPDATE TABLE A SET a3 = 30 WHERE a1 = 1 AND a2 = a
使用一个独特的视图窗口,其中使用了数据中的最小日期和最大日期...
hAxis.viewWindowMode: 'maximized'
请参阅以下工作片段...
hAxis.viewWindow: data.getColumnRange(0)
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', role: 'interval'},
{id: 'i1', type: 'number', role: 'interval'}
],
rows: [
{c:[{v: new Date(2020, 0, 27)}, {v: 10}, {v: 8}, {v: 12}]},
{c:[{v: new Date(2020, 0, 29)}, {v: 12}, {v: 10}, {v: 14}]},
{c:[{v: new Date(2020, 0, 31)}, {v: 14}, {v: 12}, {v: 16}]},
{c:[{v: new Date(2020, 1, 2)}, {v: 10}, {v: 8}, {v: 12}]}
]
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart',
dataTable: data,
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindow: data.getColumnRange(0)
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: 'cyan',
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: 'blue'},
//fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
//colors: [blauw1],
areaOpacity: 0.0,
}
});
chart.draw();
});