带字符串的折线图 x 轴数据点答案

【问题标题】：Line Chart x-Axis datapoints with Strings带字符串的折线图 x 轴数据点
【发布时间】：2017-05-17 16:49:07
【问题描述】：

我想制作一个带有多条线的 chart.js，它们在给定的 x 轴上但在不同的点上。

这是一个例子： http://codepen.io/anon/pen/oBNZRO

这是我的示例数据集：

var data = {
 datasets:[
 {
 label:"Data1",
  data:[
    {x:"2015",y:5},
    {x:"2016",y:10}
  ]
 },
 {
 label:"Data2",
  data:[
    {x:"2016",y:7},
    {x:"test",y:8}
  ]
 }
],
 labels:["2015", "2016", "test"]
};

如您所见，我的 xAxis 中有字符串，这意味着我不能使用线性 xAxis。

有没有办法获取连接到正确标签的数据的x值？

提前致谢！

干杯汉内斯

【问题讨论】：

嗨！我不确定这是否是您想要的，但我在 xAxis 中创建了一个带有字符串的多线图。请告诉我这是否是您想要的，我会说它有一个遮阳篷：codepen.io/anon/pen/NmVgLO
嗨，我想我找到了另一个解决方案，不记得我在哪里使用了这段代码。但你的答案看起来像我正在寻找的东西。所以是的，把它作为一个答案。

标签： chart.js

【解决方案1】：

我是否说过，这可能是解决您问题的好方法。我做了一个简单的例子，展示了一个在 xAxis 上带有字符串的多线图表：

https://codepen.io/anon/pen/NmVgLO

在这里你可以看到我是如何构建图表“数据”的一部分

var data = {
     labels:["2015", "2016", "test"],
     datasets:[
     {
         label: "Data1",
         fill: false,
         lineTension: 0.1,
         borderColor: "red",
         pointHoverBackgroundColor: "yellow",
         data: [
            {x:"2015",y:5},
            {x:"test",y:10}
         ]
      },
      {
         label: "Data2",
         fill: false,
         lineTension: 0.1,
         borderColor: "blue",
         borderCapStyle: 'square',
         pointHoverBackgroundColor: "yellow",
         data: [
             {x:"2015",y:5},
             {x:"2016",y:10}
         ],
         spanGaps: true,
      }
   ]
};

【讨论】：