3

各日付に垂直線がある面グラフをプロットしようとしています。各線を異なる色で表現したい。

詳細は下の画像を参照してください。

ここに画像の説明を入力

以下のコードを確認してください。$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/

4

2 に答える 2

2

クロム開発者ツールでは、レンダリングを調査し<svg>、注釈行 (垂直線) の xPath を見つけることができます。あなたの例では、次のようなものを提供します

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

この情報を使用して、ready handler で注釈の線の色 (またはその他のもの) を変更できるようになりました。

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 を見つけて、上記のような便利なスクリプトに "変換" するのは非常に簡単になります。色違いの縦線を何本も入れたいという気持ちはあります。次に、1 ではなく のコレクションが存在するだけで、<rect>個別にターゲットにすることができます。

更新します。上で書いたように、注釈行が複数ある場合は、 のコレクションを持っているだけです<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/

于 2015-07-13T11:05:38.500 に答える