使用 vuejs 的带有谷歌图表的数字时序图答案

【问题标题】：Digital timing diagram with google chart using vuejs使用 vuejs 的带有谷歌图表的数字时序图
【发布时间】：2017-04-25 12:33:02
【问题描述】：

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

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

目前，我得到了这个：

我想知道有没有办法不在两点之间画一条简单的线？有没有像curveType这样的选项可以帮助我做我想做的事？

【问题讨论】：

google折线图可以处理，是什么问题？
@WhiteHat 我的问题是，我不知道如何用我的数据绘制类似的东西。
检查这个：github.com/drom/wavedrom codepen.io/imjosh/pen/NjbrVJ
谢谢@imjosh，我看到了这个解决方案，但我更愿意留在谷歌图表库

标签： javascript html charts vue.js

【解决方案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)

请参阅以下工作 sn-p...

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>

【讨论】：

从未使用过它，但 google 的 SteppedAreaChart 可能是一个更好的解决方案，更少的数据操作——也许，看看...