Chart.js如何反转(交换)轴？

Question

从这个问题的灵感来看,我试图弄清楚如何交换折线图的轴Chart.js.

例如,在Highcharts中我们有这个例子,虽然它是一个面积图.

是否可以在折线图上"交换"X轴和Y轴？

datasets: [
    {
        label: "data1a",
        data: [1,2,3,4,5,1,2,3]
    }
]
yAxes: [
   {
     type: "linear",
     display: true,
     position: "left",
    }
]

这是我从上面的链接修改的小提琴.我基本上试图移动它,使图形看起来旋转90度.我尝试将y位置更改为"top"但仍然看起来不正确.

Answer 1

我能够在 Chart.js 2.8.0 中完成此任务：

1. x使用和将数据更改为对象列表y。由于目的是交换 x 和 y 轴，因此将“x 数据”放入 y 变量和反向变量中。例如。[{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}]

2. 将图表类型设置为“散点图”

3. 添加showLines: true到options

结果是一个折线图，其中的线可以是水平的、垂直的，甚至是对折的。线的方向由您输入的值x和输入的值定义y。

这是一个配置示例：

new Chart(document.getElementById('myChart'), {
  type: 'scatter',
  data: {
    datasets: [
      {
        label: 'My Dataset',
        data: [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}],
      },
    ],
  },
  options: {
    showLines: true,
    scales: {
      xAxes: [
        {
          type: 'linear',
          position: 'bottom',
        },
      ],
      yAxes: [
        {
          type: 'linear',
        },
      ],
    }
  }
})

如果您使用的是没有散点图的旧版本 Chart.js，则可以使用此插件： http: //dima117.github.io/Chart.Scatter/