Question

从this question获取灵感，我试图找出如何在Chart.js中交换折线图的轴。

例如，在Highcharts中我们有this example，虽然它是一张面积图。

是否可以＆＃34;交换＆＃34;折线图上的X和Y轴？

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

此处从上述链接修改了my fiddle。我基本上试图移动它，使图形看起来旋转90度。我尝试将y位置改为＆＃39; top＆＃39;但它仍然看起来不正确。

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中完成此操作：

使用x和y将数据更改为对象列表。由于打算交换x和y轴，因此将“ x数据”放在y变量中并使用verse。例如。 [{x: 3, y: 2}, {x: 5, y: 7}, {x: 9, y: 10}]
将图表类型设置为“散点图”
将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/

Chart.js如何反转（交换）轴？

2 个答案: