如何在谷歌折线图中制作虚线

时间:2014-02-19 02:45:38

标签: javascript charts google-visualization linechart google-chartwrapper

请帮我看看如何在google折线图中将其作为虚线的另一条线?我是制作图表的新手。谢谢

脚本:

  function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A',   1,       1,           0.5],
['B',   2,       0.5,         1],
['C',   4,       1,           0.5],
['D',   8,       0.5,         1],
['E',   7,       1,           0.5],
['F',   7,       0.5,         1],
['G',   8,       1,           0.5],
['H',   4,       0.5,         1],
['I',   2,       1,           0.5],
['J',   3.5,     0.5,         1],
['K',   3,       1,           0.5],
['L',   3.5,     0.5,         1],
['M',   1,       1,           0.5],
['N',   1,       0.5,         1]
 ]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {curveType: "function",
              width: 500, height: 400,
              vAxis: {maxValue: 10}}
      );
   }

1 个答案:

答案 0 :(得分:1)

您可以使用“确定性”角色列创建一条虚线,并将值设置为false:

var data = google.visualization.arrayToDataTable([
    // use "certainty" role columns to make the lines dashed
    ['x', 'Cats', {role: 'certainty'}, 'Blanket 1', {role: 'certainty'}, 'Blanket 2', {role: 'certainty'}],
    ['A', 1, false, 1, false, 0.5, false],
    ['B', 2, false, 0.5, false, 1, false],
    ['C', 4, false, 1, false, 0.5, false],
    ['D', 8, false, 0.5, false, 1, false],
    ['E', 7, false, 1, false, 0.5, false],
    ['F', 7, false, 0.5, false, 1, false],
    ['G', 8, false, 1, false, 0.5, false],
    ['H', 4, false, 0.5, false, 1, false],
    ['I', 2, false, 1, false, 0.5, false],
    ['J', 3.5, false, 0.5, false, 1, false],
    ['K', 3, false, 1, false, 0.5, false],
    ['L', 3.5, false, 0.5, false, 1, false],
    ['M', 1, false, 1, false, 0.5, false],
    ['N', 1, false, 0.5, false, 1, false]
]);

new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
    curveType: "function",
    width: 500, height: 400,
    vAxis: {maxValue: 10}
});