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

我正在尝试使用VUEJS框架绘制一些数字时序图：
像这样的：

问题是，我看了所有的图表，但我找不到一个好的来呈现这个。
如果有人熟悉谷歌图表，我想和他讨论一下。
现在，我明白了：

我想知道有没有办法不在两点之间画一条简单的线？
有没有一个选择像曲线可以帮助我做我想做的？

最佳答案

都在数据里
为了避免图表直接连接点，
您需要为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>

关于javascript - 使用vuejs的Google图表与数字时序图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43610775/