javascript - 在谷歌折线图中的同一行上组合实线和虚线格式

Question

我在我的应用程序中使用谷歌折线图来显示当前值和预测值。我收到的数据来自数据库(当前值和预计值)。我希望看到直到当前分数的实线和 future 预计分数的虚线。请让我知道如何实现这一目标。

示例:

匹配:我5月10日的当前费用是5000美元，到10月7日将是10000美元，然后直到5000美元，我将有实线曲线和后记，直到10000美元，我想要虚线。

注意:这类似于高图表中的区域功能。但我想知道是否可以在谷歌图表中完成同样的操作。

Answer 1

确定性 column role可用于使部分线变成虚线

---

确定性列的值应为 bool 类型:

true --> 实线

false --> 虚线

---

请参阅以下工作片段以获取示例图表...

google.charts.load('current', {
  callback: function () {
    new google.visualization.LineChart(document.getElementById('chart_div')).draw(
      new google.visualization.DataTable({
        "cols": [
          {"type": "string", "label": "Year"},
          {"type": "number", "label": "Sales"},
          {"type": "boolean", "role": "certainty"}
        ],
        "rows": [
          {"c": [{"v": "2014"}, {"v": 1000}, {"v": true}]},
          {"c": [{"v": "2015"}, {"v": 1070}, {"v": true}]},
          {"c": [{"v": "2016"}, {"v": 1200}, {"v": true}]},
          {"c": [{"v": "2017"}, {"v": 1070}, {"v": false}]},  // <-- dashed
          {"c": [{"v": "2018"}, {"v": 1200}, {"v": false}]}   // <-- dashed
        ]
      })
    );
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>