在面积图、谷歌图表上绘制不同颜色的垂直线答案

【问题标题】：Plot vertical lines with different colors on area chart, google charts在面积图、谷歌图表上绘制不同颜色的垂直线
【发布时间】：2015-10-01 10:51:36
【问题描述】：

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

详情请参考下图。

请检查我下面的代码。 $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/

【问题讨论】：

你能把它放在小提琴上吗？
如果这个小提琴甚至不起作用，它应该如何提供帮助？您需要修复一些外部资源。
@altocumulus - 请检查jsfiddle.net/sashant9/24qo18to/1/embedded/result, jsfiddle.net/sashant9/24qo18to/1

标签： javascript svg google-visualization jsapi

【解决方案1】：

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

annotations: {
    stemColor: 'red'
}

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

【讨论】：

我也看不到自定义点在这种情况下应该如何提供帮助，以及 stemColor 应该如何单独为线条着色。

【解决方案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 并将其“翻译”为上面的小有用脚本。我感觉你想要多条不同颜色的垂直线。然后将只有 <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');     
   }     
});

分叉小提琴 -> http://jsfiddle.net/zcb9bk68/

【讨论】：

是的，你是对的，我想要多条不同颜色的垂直线。你能帮忙吗
更新了答案。从这里拿走。
这很好，但我不想走这条路。我们真的没有预定义的属性来做到这一点吗？我已经看文档一个多小时了，是的@davidkonrad，你是对的。 stemColor 不会用不同的颜色给不同的线条上色。
@patel，我不知道有什么内置功能可以让它成为可能。谷歌可视化在这些方面不是很可定制，或者可能有些人要求太高:) 有几十个（如果不是上百个）以最奇特的方式针对不同颜色的未回答问题，不同的注释布局，不同位置的线条等。我相信这是谷歌方面的积极选择——实现所有这些可定制的属性将是一项艰巨的任务，毕竟只针对非常小的受众。如果你真的想要它，你必须自己做。或者使用其他库。
@davidkonrad - 但是在将“测试”标签悬停在每条彩色线条上时，线条的颜色会发生变化！线条颜色不应该改变它应该保持不变。