在面積圖上繪製不同顏色的垂直線，谷歌圖表

我想繪製每個日期都有垂直線的面積圖。我想用不同的顏色來表示每一行。在面積圖上繪製不同顏色的垂直線，谷歌圖表

詳情請參閱下圖。

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/

來源

2015-07-13 Sashant Pardeshi

可你把那提琴？ –

如果它甚至不工作，這個小提琴應該如何幫助？您需要修復一些外部資源。 – altocumulus

@altocumulus - plz chk https://jsfiddle.net/sashant9/24qo18to/1/embedded/result/，http://jsfiddle.net/sashant9/24qo18to/1/ –

你需要的annotationsstemColor財產上色這些行。

annotations: { 
    stemColor: 'red' 
}

這裏是更新的Fiddle。更多選項編輯註釋，找到文件here

來源

2015-07-13 10:59:44 Patel

我也失敗了，看看custumisng點應該如何幫助這種情況下，'stemColor'應該如何單獨着色。 – davidkonrad

Chrome開發工具，你可以調查所呈現的<svg>並找到註釋線（S）（垂直線）中的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 
});

enter image description here

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

請記住，如果您更改圖表中的任何內容， e <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');  
    }  
});

enter image description here

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

來源

2015-07-13 11:05:38 davidkonrad

你的解決方案工作thnx –

是的，你是對的我想多條不同顏色的垂直線。你可不可以幫忙 –

我沒有投票 –

在面積圖上繪製不同顏色的垂直線，谷歌圖表

回答

相關問題