Chart.js - 以相同的y值连接折线图中的两个数据集

Question

JSBin

这是我目前所拥有的JSBin。

设计

以下是我正在尝试实现的设计的屏幕截图：

尝试解决方案

我想通过将它们偏移为0，然后以相同的值对每个数据集进行会议，例如：

数据1

data : [0,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),20]

数据2

data : [0,0,0,0,0,20, randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]

问题

可行，但会导致此问题：

相关的HTML / CSS / JS

JSBin可能更新

CSS

.canvas-container {
  position: relative;
  width:100%;
  height: 500px;
}

#canvas {
  position:relative;
  height: 500px;
  width:100%;
}

JS

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
  labels : ["","DAY 1", "DAY 2", "DAY 3", "DAY 4", "DAY 5", "DAY 6", "DAY 7", "DAY 8", "DAY 9", "DAY 10" ],
  datasets : [
    {
      label: "Filters",
      fillColor : "rgba(151,187,205,0.2)",
      strokeColor : "rgba(151,187,205,1)",
      pointColor : "rgba(151,187,205,1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "rgba(151,187,205,1)",
      data : [0,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),20]
    },
    {
      label: "Filters (Goal)",
      fillColor : "rgba(220,220,220,0.2)",
      strokeColor : "rgba(220,220,220,1)",
      pointColor : "rgba(220,220,220,1)",
      pointStrokeColor : "#fff",
      pointHighlightFill : "#fff",
      pointHighlightStroke : "rgba(220,220,220,1)",
      data : [0,0,0,0,0,20, randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
    },
  ]

}

window.onload = function(){
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myLine = new Chart(ctx).Line(lineChartData, {
    responsive: true
  });
}

HTML

<section class="canvas-wrap">
  <canvas id="canvas" height="450" width="600"></canvas>
</section>

Answer 1

想出来。如果有人遇到此问题，解决方案是根据需要在数据数组中使用null而不是0。

例如：

数据集1

data : [5,7,8,9,11]

数据集2

data : [null, null, null, null, 11, 5, 8, 3]