如何使用Google Chart创建不连续折线图

Question

我想创建一个像这样的不连续折线图。

绘制我写的图表。

  function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Number');

      data.addRows([
        [new Date(2017, 1, 20),  460],
        [new Date(2017, 1, 27),  579],        
        [new Date(2017, 1, 27),  null],
        [new Date(2017, 2, 1),  679],
        [new Date(2017, 2, 6),  352]
      ]);

      var linearOptions = {
        title: 'Discontinuous Line Chart'
      };

      var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
       linearChart.draw(data, linearOptions);
    }

我必须输入null值数据才能将其分开。

有没有办法从像这样的数据中绘制上面的图表？

data.addRows([
        [new Date(2017, 1, 20),  460, true],
        [new Date(2017, 1, 27),  579, false],        
        [new Date(2017, 2, 1),  679, true],
        [new Date(2017, 2, 6),  352, true]
      ]);

这是jsfiddle中的源代码。

https://jsfiddle.net/7jkmovqs/

Answer 1

您可以使用'style' column role ...

使用stroke-opacity: 0.0;在行

中创建间隙

请参阅以下工作代码段...

此处，null会产生默认样式...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Number');
    data.addColumn({role: 'style', type: 'string'});

    data.addRows([
      [new Date(2017, 1, 20),  460, null],
      [new Date(2017, 1, 27),  579, null],
      [new Date(2017, 2, 1),  679, 'line {stroke-opacity: 0.0;}'],
      [new Date(2017, 2, 6),  352, null]
    ]);

    var linearOptions = {
      title: 'Discontinuous Line Chart'
    };

    var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
    linearChart.draw(data, linearOptions);
  },
  packages: ['corechart']
});

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

注意：'certainty'有一个列角色，它带有一个布尔值......

data.addRows([
  [new Date(2017, 1, 20),  460, true],
  [new Date(2017, 1, 27),  579, false],
  [new Date(2017, 2, 1),  679, true],
  [new Date(2017, 2, 6),  352, true]
]);

但是这将使虚线 ...

行