谷歌折线图的虚线答案

【问题标题】：Dashed lines for a google line chart谷歌折线图的虚线
【发布时间】：2012-03-26 22:58:10
【问题描述】：

我想要一个谷歌折线图，其中一个折线系列是虚线。

这可以使用 google jsapi (javascript) 吗？

我实际上计划使用 ComboChart，大多数数据使用 AreaChart，但有一个系列使用 LineChart。我希望那条线是一条虚线......

【问题讨论】：

你看过fusioncharts.com

标签： charts google-visualization

【解决方案1】：

是的，你可以。只需阅读文档上的 data table roles 即可

您绘制的每个点都可以是确定的（确定性：真）或不确定的（确定性：假）。两点之间，如果其中一个或两个都不确定，则以虚线表示。

你只需要这样做：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); 
data.addColumn('number', 'Sales'); 
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
  ['April',1000,  true],
  ['May',  1170,  true],
  ['June',  660,  true],
  ['July', 1030,  false]
]);
var chartLineWithDash = new google.visualization.LineChart(yourDiv);
chartLineWithDash .draw(data);

6 月和 7 月之间的线将变为虚线。

目前它是“实验性”风格，但请随时询问！ :) 希望对你有所帮助！

【讨论】：

这也适用于数据视图。如上所述设置“数据”变量，然后您可以执行 var view = new google.visualization.DataView(data)。之后，在调用 view.setColumns() 时，请确保包含添加的确定性列的新列索引。

【解决方案2】：

请参考：LineChart Customization Doc by Google

解决方案

    var options = 
            {
                lineWidth: 2,
                series: {0: {type: 'line',lineDashStyle: [2, 2]}}
            };
    chartLineWithDash.draw(data, options);

示例：运行代码段

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', 'lineDashStyle: [1, 1]', 'lineDashStyle: [2, 2]',
               'lineDashStyle: [4, 4]', 'lineDashStyle: [5, 1, 3]',
               'lineDashStyle: [4, 1]',
               'lineDashStyle: [10, 2]', 'lineDashStyle: [14, 2, 7, 2]',
               'lineDashStyle: [14, 2, 2, 7]',
               'lineDashStyle: [2, 2, 20, 2, 20, 2]'],
              [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
              [2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
              [3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
              [4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
              [5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
              [6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
              [7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
              [8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
              [9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
        ]);

        var options = {
          hAxis: { maxValue: 10 },
          vAxis: { maxValue: 18 },
          chartArea: { width: 380 },
          lineWidth: 4,
          series: {
            0: { lineDashStyle: [1, 1] },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] },
            3: { lineDashStyle: [5, 1, 3] },
            4: { lineDashStyle: [4, 1] },
            5: { lineDashStyle: [10, 2] },
            6: { lineDashStyle: [14, 2, 7, 2] },
            7: { lineDashStyle: [14, 2, 2, 7] },
            8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
          },
          colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

【讨论】：