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

【问题标题】：Chart.js -> line chart -> multiple points with the same XChart.js -> 折线图 -> 具有相同 X 的多个点
【发布时间】：2018-11-21 17:04:51
【问题描述】：

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

换句话说，这是：

无论我尝试什么，我都无法创建它看起来像图像。有谁知道我如何管理这个（使用插件或不使用插件）？

【问题讨论】：

那么你的数据类型是什么，你想要达到什么目的？

标签： javascript chart.js

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

【讨论】：