在面积图、google 图表上绘制不同颜色的垂直线

Question

我正在尝试绘制一个面积图，其中每个日期都有垂直线。我想用不同的颜色表示每一行。

详情请参考下图

请检查下面我的代码。 $session 变量包含表示图形的 json 数据。

$session = 
[["Date",{"role":"annotation"},"Value"],["2015-06-07",null,861],["2015-06-08",null,1381],["2015-06-09",null,2351],["2015-06-10",null,2125],["2015-06-11",null,1970],["2015-06-12",null,1745],["2015-06-13",null,1079],["2015-06-14",null,1087],["2015-06-15",null,2221],["2015-06-16",null,2176],["2015-06-17","Test ",1918],["2015-06-18",null,1826],["2015-06-19",null,1720],["2015-06-20",null,937],["2015-06-21",null,1094],["2015-06-22",null,2170],["2015-06-23",null,2085],["2015-06-24",null,1952],["2015-06-25",null,1865],["2015-06-26",null,1674],["2015-06-27",null,977],["2015-06-28",null,1005],["2015-06-29",null,2130],["2015-06-30",null,1913],["2015-07-01",null,1774],["2015-07-02",null,1891],["2015-07-03",null,1572],["2015-07-04",null,979],["2015-07-05",null,1024],["2015-07-06",null,2163],["2015-07-07",null,2041]]


<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">

            function drawVisualization() {

                var session_data = <?php echo $session_data; ?>;

                for (var index = 0; index < session_data.length; index++) {
                    session_data[index][0] = new Date(session_data[index][0]);
                }

                var data = google.visualization.arrayToDataTable(session_data);

                var chart = new google.visualization.AreaChart(document.querySelector('#linechart_material'));
                chart.draw(data, {
                    width: 1600,
                    height: 600,
                    annotation: {
                        1: {
                            style: 'line',
                            color: 'black'
                        },
                        2:{
                            style: 'line',
                            color: 'blue'

                        }
                    },
                    vAxis: {
                        gridlines: {
                            color: 'none'
                        },
                        baselineColor: 'green'
                    },
                    hAxis: {
                        gridlines: {
                            color: 'none'
                        }
                    },
                    series: {
                        0: {color: '#e7711b'},
                        1: {color: '#e2431e'},
                        2: {color: '#f1ca3a'},
                        3: {color: '#6f9654'},
                        4: {color: '#1c91c0'},
                        5: {color: '#43459d'},
                    }
                });
            }
            google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});
        </script>
    </head>
    <body>
        <div id="linechart_material"></div>
    </body>
</html>

请检查js fiddle - http://jsfiddle.net/sashant9/24qo18to/1/

Answer 1

您需要 stemColor 属性个 annotations 来为这些线条着色。

annotations: {
    stemColor: 'red'
}

这是更新后的 Fiddle。有关编辑注释的更多选项，请查找文档 here

Answer 2

在 chrome 开发人员工具中，您可以调查呈现的 <svg> 并找到注释行（垂直线）的 xPath。在你的例子中，它给出了类似

//*[@id="linechart_material"]/div/div[1]/div/svg/g[2]/g[1]/g[4]/rect

有了这些信息，您现在可以在准备好的处理程序中更改注释线颜色（或其他任何颜色）：

google.visualization.events.addListener(chart, 'ready', function() {
   var rect = document.getElementById('linechart_material')
              .querySelector('svg')
              .querySelector('g:nth-of-type(2)')
              .querySelector('g:nth-of-type(1)')
              .querySelector('g:nth-of-type(4)')
              .querySelector('rect')
   rect.setAttribute('stroke', '#FF0000'); //red color
   rect.setAttribute('stroke-width', '5'); //just to emphasize the point
});

演示 -> http://jsfiddle.net/eLpkm14L/

请记住，如果您更改图表中的任何内容，<svg> 结构也会更改。但是通过一些小练习，可以很容易地找到 xPath 并将其 "translate" 到上面的一个有用的脚本中。我有一种感觉，你想要多条不同颜色的垂直线。然后只会有 <rect> 的集合，而不是 1 个，您可以单独定位。

更新。正如我上面所写的，如果有多个注释行，你只有 <rect> 的集合：

google.visualization.events.addListener(chart, 'ready', function() {
   var rects = document.getElementById('linechart_material')
               .querySelector('svg')
               .querySelector('g:nth-of-type(2)')
               .querySelector('g:nth-of-type(1)')
               .querySelector('g:nth-of-type(4)')
               .querySelectorAll('rect')
   for (var i=0;i<rects.length;i++) {
       rects[i].setAttribute('stroke', getRandomColor());
       rects[i].setAttribute('stroke-width', '5');     
   }     
});

分叉 fiddle -> http://jsfiddle.net/zcb9bk68/

在面积图、google 图表上绘制不同颜色的垂直线

Plot vertical lines with different colors on area chart, google charts

javascript

svg

google-visualization

jsapi