Chart.js->折线图->具有相同X的多个点

Question

我正在使用chart.js创建一些图表，并且需要制作折线图，该折线图在X轴上的同一点具有多个条目。

换句话说，这是：

无论我尝试什么，我都无法创建它以使其看起来像图像。 有人知道我该如何管理（使用插件还是不使用插件）？

Answer 1

这可以通过散点图图来完成，数据必须是具有x和y的对象数组，还可以调整线的张力。

var data = {
  datasets: [{
    label: "Dataset #1",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [{
       x: 0,
       y: 5
     }, 
     {
       x: 1,
       y: 10
     },
     {
       x: 1,
       y: 5
     },
     {
       x: 3,
       y: 10
     }]
  }]
};

var option = {
  scales: {
    yAxes: [{
     stacked: true,
     gridLines: {
       display: true,
       color: "rgba(255,99,132,0.2)"
     }
    }],
    xAxes: [{
     gridLines: {
       display: true,
       color: "rgba(255,99,132,0.2)"
     }
   }]
 },
 elements: {
    line: {
        tension: .1, // bezier curves
    }
 }
};

 Chart.Scatter('chart_0', {
    options: option,
    data: data
 });

[Codepen] https://codepen.io/devil-geek/pen/KrQWBP