javascript - 使用vuejs与google图表的数字时序图

Question

我正在尝试使用 vuejs 框架渲染一些数字时序图:
像这样的东西:

问题是，我查看了每个图表，但找不到一个好的图表来呈现它。
如果有人熟悉google图表，我想和他讨论

目前，我明白了:

我想知道是否有什么方法可以不在两点之间绘制简单的线？ 有没有像 curveType 这样的选项可以帮助我做我想做的事？

Answer 1

一切都在数据中

为了防止图表直接连接点，

您需要为 x 或 y 的每次更改重复值

这将强制所有线条垂直或水平绘制

重复x轴将产生一条垂直线

[2, 0],  
[2, 1],  // <-- repeat x-axis to get vertical line (2)

重复水平 y 轴

[2, 1],  
[4, 1],  // <-- repeat y-axis to get horizontal line (1)

---

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages:['bar', 'corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [2, 0],  // <-- set start postion
    [2, 1],  // <-- repeat x-axis to get vertical line
    [4, 1],  // <-- repeat y-axis to get horizontal line
    [4, 2],  // <-- vertical
    [5, 2],  // <-- horizontal
    [5, 1],  // <-- vertical
    [6, 1],  // <-- horizontal
    [7, 1],  // <-- horizontal
    [8, 1],
    [8, .5],
    [9, .5],
    [10, .5]
  ]);

  var options = {
    chartArea: {
      top: 12,
      right: 12,
      bottom: 24,
      left: 24,
      height: '100%',
      width: '100%'
    },
    legend: {
      position: 'none'
    },
    hAxis: {
      viewWindow: {
        min: 0,
        max: 12
      }
    },
    vAxis: {
      viewWindow: {
        min: 0,
        max: 3
      }
    }
  };

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

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