我们可以用chart js生成这样的图表吗？

Question

我目前正在尝试使用图表JS（4.1.1）创建一个睡眠跟踪应用程序，但我似乎不知道如何正确让它工作，以及如何传递数据以使其正确显示

我期待 y 轴侧有我的睡眠阶段标签，x 轴上有数据表示，请参阅图像...

我尝试了此选项

indexAxis: 'y'

来显示 y 轴上的标签，但是，我看到 y 轴上的标签，但图表未加载。

我在下面添加了相关图表，是否可以使用图表JS（4.1.1）生成这样的图表？

我尝试使用不同的数据集组合来获取此图表，但每次都失败。

数据集示例：

datasets: [{
  data: [{x: 10, y: 20}, {x: 15, y: null}, {x: 20, y: 10}]
}]

---

datasets: [{
  data: [{x: 'awake', y: 20}, {x: 'rem', y: 10}]
}]

---

datasets: [{
  data: [{'data.key': 'one', 'data.value': 20}, {'data.key': 'two', 'data.value': 30}]
}]

Answer 1

我不知道它是否会对您有帮助，但我尝试重新创建您给出的示例之一。

我没有反转轴，而是将不同的睡眠类型放在 y 轴上。 由于 Chartjs 并不真正接受 Y 轴上的字符串，因此我使用回调函数将 Y 轴上的标签替换为 yLabels 数组中的值。

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<canvas id="myCanva"></canvas>

var ctx = document.getElementById('myCanva').getContext('2d');
var yLabels = ["REM", "Light", "Deep", "Awake"]

var cfg = {
  type:'line',
  data:{
    datasets: [{
      data: [
        {x: '0', y: '0'},{x: '1', y: '0'},{x: '1', y: '3'},{x: '4', y: '3'},{x: '4', y: '2'},{x: '5', y: '2'},{x: '5', y: '1'},{x: '8', y: '1'},{x: '8', y: '0'}
      ]
    }]
  },
  options:{
   scales: {
      y: {
        min:0,
        max:3,
        ticks: {
          stepSize: 1,
          callback: function(index) {
            return yLabels[index];
          },
        }
      }
    }
  }
}

var myChart = new Chart(ctx,cfg);

这是一个codepen链接

此外，如果您想了解更多信息，这里还有 Chartjs 刻度配置文档