Chart.js如何反转（交换）轴？ [英] Chart.js How to invert (swap) axes?

问题描述

从这个问题，我试图弄清楚如何在 Chart.js 中交换折线图的轴。

Taking from inspiration from this question, I am trying to figure out how to swap the axes of a Line chart in Chart.js.

例如，在Highcharts中我们有这个例子，虽然这是一张面积图。

For instance, in Highcharts we have this example, although it's an area chart.

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

Is it possible to "swap" the X and Y axis on a line chart?

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

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

Here's my fiddle modified from the above link. I'm basically trying to move it so the graph looks rotated 90 degrees. I tried changing the y position to 'top' but it still doesn't look correct.

推荐答案

我能够完成此操作在Chart.js 2.8.0中：

I was able to accomplish this in Chart.js 2.8.0:

1. 将数据更改为 x的对象列表和 y 。由于意图是交换x和y轴，所以将x数据放在y变量和vise中。
   例如。 [{x：3，y：2}，{x：5，y：7}，{x：9，y：10}]

1. Change data to a list of objects with x and y. Since the intention is to swap x and y axis, put the "x data" in the y variable and vise verse. eg. [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}]

将图表类型设置为'scatter'

Set the chart type to 'scatter'

添加 showLines：true 到选项

结果是一个折线图，其中线条可以是水平的，垂直的，甚至是双背面。行的方向由您放入 x 中的值以及放入 y 中的值定义。

The outcome is a line chart where the line can be horizontal, vertical, or even double back on itself. The orientation of the line is defined by which values you put in x and which you put in 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/

If you're using an older version of Chart.js that doesn't have scatter plots, you can use this plugin: http://dima117.github.io/Chart.Scatter/

这篇关于Chart.js如何反转（交换）轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！