自定義谷歌路線圖

-1

我工作的項目，需要一個折線圖，我選擇了谷歌線圖，因爲這是很容易得到快速的使用，但我有問題，在谷歌定製一些功能線圖表有一種方法可以自定義谷歌圖表像這個圖像？我試過並使用旋轉，但我沒有得到我的結果！
enter image description here 自定義谷歌路線圖

這裏是谷歌線圖的示例代碼

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['X', 'Y'], 
     [1, 100], // keep linked points adjacent 
     [1, 200], 
     [null, null], // insert blank row in between 
     [2, 150], 
     [2, 275], 
     [null, null], 
     [3, 75], 
     [3, 200], 
     [null, null], 
     [4, 100], 
     [4, 300] 
    ]); 
    var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 
    chart.draw(data, { 
     height: 400, 
     width: 600, 
     pointSize: 20, 
     pointShape: 'triangle', rotation: 180 
    }); 
} 
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

來源

2014-09-01 Daniel.V

Pr確定你不能，只有類似的定製改變了點的形狀，但不支持字符：https://developers.google.com/chart/interactive/docs/points – juvian 2014-09-01 20:58:36

你能舉一個你會做什麼的例子嗎？喜歡實現？ – asgallant 2014-09-05 02:30:45

@asgallant在這裏我添加一個圖像，顯示我想要的！ – 2014-09-06 21:59:36

您可以通過拆分數據點到單獨的系列和不同點形狀選項畫他們做到這一點：

function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['X', 'Y', 'Direction'], 
     [1, 100, 'down'], // keep linked points adjacent 
     [1, 200, 'up'], 
     [null, null, null], // insert blank row in between 
     [2, 150, 'down'], 
     [2, 275, 'up'], 
     [null, null, null], 
     [3, 75, 'down'], 
     [3, 200, 'up'], 
     [null, null, null], 
     [4, 100, 'down'], 
     [4, 300, 'up'] 
    ]); 

    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1, { 
     // down triangles 
     type: 'number', 
     calc: function (dt, row) { 
      return (dt.getValue(row, 2) == 'down') ? dt.getValue(row, 1) : null; 
     } 
    }, { 
     // up triangles 
     type: 'number', 
     calc: function (dt, row) { 
      return (dt.getValue(row, 2) == 'up') ? dt.getValue(row, 1) : null; 
     } 
    }]); 

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 
    chart.draw(view, { 
     height: 400, 
     width: 600, 
     series: { 
      0: { 
       // this will draw the line 
       pointSize: 0, 
       color: '#3366cc' // set the color so they are all the same 
      }, 
      1: { 
       // this will draw the down triangles 
       lineWidth: 0, 
       pointSize: 20, 
       pointShape: { 
        type: 'triangle', 
        rotation: 180 
       }, 
       visibleInLegend: false, 
       color: '#3366cc' // set the color so they are all the same 
      }, 
      2: { 
       // this will draw the up triangles 
       lineWidth: 0, 
       pointSize: 20, 
       pointShape: { 
        type: 'triangle' 
       }, 
       visibleInLegend: false, 
       color: '#3366cc' // set the color so they are all the same 
      } 
     } 
    }); 
} 
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

http://jsfiddle.net/asgallant/6dhm8u3y/

來源

2014-09-06 23:11:27 asgallant

自定義谷歌路線圖

回答

相關問題