Question

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

请参阅下面的图片了解详情。

enter image description here

请检查下面的代码。 $ 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小提琴 - http://jsfiddle.net/sashant9/24qo18to/1/

Answer 1

您需要stemColor annotations属性为这些行着色。

annotations: {
    stemColor: 'red'
}

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

Answer 2

在chrome开发人员工具中，您可以调查渲染的$.fn.randomize = function(selector){ var $elems = selector ? $(this).find(selector) : $(this).children(), $parents = $elems.parent(); $parents.each(function(){ $(this).children(selector).sort(function(){ return Math.round(Math.random()) - 0.5; }).detach().appendTo(this); }); return this; }; $('ol.slideshow').randomize();并找到注释行的xPath（垂直线）。在您的示例中，它提供了类似

的内容

<svg>

使用此信息，您现在可以在就绪处理程序中更改注释行颜色（或其他任何内容）：

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

enter image description here

演示 - ＆gt;的 http://jsfiddle.net/eLpkm14L/

请记住，如果您更改图表中的任何内容，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 });结构也会发生变化。但是通过一些小练习，很容易找到xPath并将其“翻译”为如上所述的一个有用的小脚本。我觉得你想要有多条不同颜色的垂直线条。然后会有一个<svg>而不是1的集合，你可以单独定位。

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

<rect>

enter image description here

分叉小提琴 - ＆gt;的 http://jsfiddle.net/zcb9bk68/

在面积图，谷歌图表上绘制具有不同颜色的垂直线

2 个答案: