如何在Google折線圖中使SERIES線虛線？

在Google Line Chart你怎麼製作一個系列一行破滅？如何在Google折線圖中使SERIES線虛線？

例如下面屏幕截圖中的紅線（稱爲「行B」）？

enter image description here

下面是我非常簡單的測試代碼，只需在瀏覽器中打開它，它會立刻開始工作。

請注意，通常建議以新增certainty角色：

{"p":{"role":"certainty"},"label":"Dashed","type":"boolean"}

不幫助這裏，因爲它將使虛線（部分）的兩行（行「A」和「B」）。

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
<script type="text/javascript"> 

     var data = {"rows":[ 
     {"c":[{"v":"C"},{"v":-43},{"v":-42}]}, 
     {"c":[{"v":"D"},{"v":-49},{"v":-39}]}, 
     {"c":[{"v":"E"},{"v":-49},{"v":-48}]}, 
     {"c":[{"v":"F"},{"v":-50},{"v":-49}]}, 
     {"c":[{"v":"G"},{"v":-57},{"v":-56}]}], 

     "cols":[ 
     {"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"}, 
     {"p":{"role":"data"},"label":"Row A","type":"number"}, 
     {"p":{"role":"data"},"label":"Row B","type":"number"}]}; 

     function drawCharts() { 
      var x = new google.visualization.DataTable(data); 

      var options = { 
       title: 'How to make red line dashed?', 
       width: 800, 
       height: 600 
      }; 

      var chart = new google.visualization.LineChart(document.getElementById('test')); 
      chart.draw(x, options); 
     } 

     $(function() { 
      google.setOnLoadCallback(drawCharts); 
     }); 

</script> 
</head> 
<body> 
<div id="test"></div> 
</body> 
</html>

來源

2013-06-26 Alexander Farber

Here is an example使用確定性角色。有什麼理由爲什麼這不適合你？

google.load('visualization', '1', { 
    packages: ['corechart'], 
    callback: drawVisualization 
}); 

var data = { 
    "rows": [ 
     {"c": [{"v": "C"}, {"v": -43}, {"v": -42}, {"v": false}]}, 
     {"c": [{"v": "D"}, {"v": -49}, {"v": -39}, {"v": false}]}, 
     {"c": [{"v": "E"}, {"v": -49}, {"v": -48}, {"v": false}]}, 
     {"c": [{"v": "F"}, {"v": -50}, {"v": -49}, {"v": false}]}, 
     {"c": [{"v": "G"}, {"v": -57}, {"v": -56}, {"v": false}]}], 

    "cols": [ 
     {"p": {"role": "domain"},"label": "MEASUREMENT","type": "string"}, 
     {"p": {"role": "data"},"label": "Row A","type": "number"}, 
     {"p": {"role": "data"},"label": "Row B","type": "number"}, 
     {"p": {"role": "certainty"},"type": "boolean"}] 
}; 

function drawVisualization() { 
    var x = new google.visualization.DataTable(data); 

    var options = { 
     title: 'How to make red line dashed?', 
     width: 800, 
     height: 600 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('visualization')); 
    chart.draw(x, options); 
}

Here is an example使用確定性角色使兩條線都成爲虛線。

google.load('visualization', '1', { 
    packages: ['corechart'], 
    callback: drawVisualization 
}); 

var data = { 
    "rows": [ 
     {"c": [{"v": "C"}, {"v": -43}, {"v": false}, {"v": -42}, {"v": false}]}, 
     {"c": [{"v": "D"}, {"v": -49}, {"v": false}, {"v": -39}, {"v": false}]}, 
     {"c": [{"v": "E"}, {"v": -49}, {"v": false}, {"v": -48}, {"v": false}]}, 
     {"c": [{"v": "F"}, {"v": -50}, {"v": false}, {"v": -49}, {"v": false}]}, 
     {"c": [{"v": "G"}, {"v": -57}, {"v": false}, {"v": -56}, {"v": false}]}], 

    "cols": [ 
     {"p": {"role": "domain"},"label": "MEASUREMENT","type": "string"}, 
     {"p": {"role": "data"},"label": "Row A","type": "number"}, 
     {"p": {"role": "certainty"},"type": "boolean"}, 
     {"p": {"role": "data"},"label": "Row B","type": "number"}, 
     {"p": {"role": "certainty"},"type": "boolean"}] 
}; 

function drawVisualization() { 
    var x = new google.visualization.DataTable(data); 

    var options = { 
     title: 'How to make red line dashed?', 
     width: 800, 
     height: 600 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('visualization')); 
    chart.draw(x, options); 
}

來源

2013-06-26 13:48:42

謝謝，但我仍然不明白它的工作原理。我試圖修改你的代碼，使兩個系列都破滅，但失敗了：http://jsfiddle.net/xhwJM/2/ –

你需要讓每個確定性列緊跟在你的系列列之後。訂單很重要。 –

如何在Google折線圖中使SERIES線虛線？

回答

相關問題