范围标记使用Google Chart工具

问题描述 投票:1回答:1

我想在Google Chart api中突出显示图表的范围或区域。我需要线条和区域。我在带有静态图像(link)的谷歌图表的弃用版本中找到了它的文档,但我找不到任何关于如何在新版本中执行此操作的文档。这就是我想要实现的目标:

谢谢!

svg google-visualization
1个回答
2
投票

您需要使用ComboChart将多个不同类型的系列放入一个图表中。你需要一个“区域”系列来获得彩色区域。有几种不同的方法来获得垂直线,但鉴于您已经必须使用ComboChart来制作彩色区域,您也可以使用相同的技术来绘制垂直线。以下是一些示例代码,可以创建如下图表:

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/

© www.soinside.com 2019 - 2024. All rights reserved.