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位置更改为"顶部"，但看起来仍然不正确。

Answer 1

@dralth的提案与2.8.0版的效果很好，但是由于某种原因，showLines: true自版本2.9.0。

仍然可以通过为每个数据集使用showLine属性来显示行。

在 @dralth的示例中，其工作如下（使用2.9.3版测试）：

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}],
        showLine: true
      },
    ],
  },
  options: {
    scales: {
      xAxes: [
        {
          type: 'linear',
          position: 'bottom',
        },
      ],
      yAxes: [
        {
          type: 'linear',
        },
      ],
    }
  }
})

Answer 2

我能够在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. 将图表类型设置为'STACTER'

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.io/chart.scatter/catert/pater/pate/p>