javascript - 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
 });

[代码笔] https://codepen.io/devil-geek/pen/KrQWBP