使用Google图表工具进行范围标记 [英] Range Markers using Google Chart tool
问题描述
我正在尝试在Google Chart API中突出显示图形的范围或区域.我需要线条和区域.我在不推荐使用的带有静态图片的Google图表版本中找到了相关文档(链接),但在新版本中找不到任何有关如何执行此操作的文档.这就是我想要实现的目标:
I am trying to highlight ranges or areas of a graph in Google Chart api. I need both lines and areas. I found documentation for it in the deprecated version of Google Chart with static images (link), but I can't find any documentation on how to do it in the new version. This is what i'm trying to achieve:
谢谢!
推荐答案
您需要使用ComboChart才能将多种不同类型的序列生成一个图表.您需要一个区域"系列以获取彩色区域.有几种不同的方法来获取垂直线,但是鉴于您已经必须使用ComboChart来制作彩色区域,您不妨使用相同的技术来绘制垂直线.这是一些创建像这样的图表的示例代码:
You need to use a ComboChart to get multiple different types of series into one chart. You need an "area" series to get the colored area. There are a few different ways to get a vertical line, but given that you're already going to have to use a ComboChart to make the colored area, you might as well use the same technique to draw the vertical line. Here's some sample code that creates a chart like this:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addColumn('number', 'Area');
data.addColumn('number', 'Vertical Line');
data.addRows([
[1, 5, null, null],
[2, 4, null, null],
[3, 6, null, null],
[4, 2, null, null],
[5, 2, null, null],
[6, 5, null, null],
[7, 8, null, null],
[8, 9, null, null],
[9, 3, null, null],
[10, 6, null, null],
// add data for the area background
// start of area:
[5, null, 0, null], // make sure the bottom value here is as low or lower than the min value you want your chart's y-axis to show
[5, null, 10, null], // make sure the top value here is as high or higher than the max value you want your chart's y-axis to show
// end of area:
[8, null, 10, null], // use the same max value as the start
[8, null, 0, null], // use the same min value as the start
// add data for line:
[3, null, null, 0], // use the same min value as the area
[3, null, null, 10] // use the same max value as the area
]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
series: {
0: {
type: 'line'
},
1: {
// area series
type: 'area',
enableInteractivity: false,
lineWidth: 0
},
2: {
// vertical line series
type: 'line',
enableInteractivity: false
}
},
vAxis: {
viewWindow: {
// you may want to set min/max here, depending on your data and the min/max used for your area and vertical line series
}
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
查看它的工作原理: http://jsfiddle.net/asgallant/FEy4W/
这篇关于使用Google图表工具进行范围标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!