javascript – chart.js在折线图上切换x / y轴

假设我有一个这样的折线图： https://jsfiddle.net/13fyhL4j/

HTML：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

JS：

var ctx = document.getElementById("myChart");
var yLabels = [0,2,3,6,7];
var xLabels = ['A','B','C','D','E'];

var myChart = new Chart(ctx,{
    type: 'line',data: {
        labels: xLabels,datasets: [
            {
                type: 'line',label: 'Line',data: yLabels,fill: false,}
        ]
    },options:{
        scales: {
                    xAxes: [{
                        display: true,scaleLabel: {
                            display: true,labelString: 'x label'
                        },}],yAxes: [{
                        display: true,labelString: 'y label'
                        },}]
                }
    }
});

这里x轴具有类别比例,y轴具有线性比例.我需要交换轴,但是,我找不到如何使x轴线性和y轴类别.

Image explaning situation

不仅要更改轴值,还要更改图表本身.

解决方法

我无法找到任何表明你可以用折线图做到的东西,但你可以用散点图来做.第一步是从xAxes和yAxes中抽象出轴属性：

const xAxis = [{
    /*type: 'time',time: { displayFormats: {} },whatever*/
}];

const revenueAxis = [{
    /*scaleLabel: {},ticks: {},whatever*/
}];

然后根据您定义的条件决定将哪个数据集放在哪个轴上：

let swapaxes = true;
const xValues = [1,4,5];
const yValues = [5,1];
let data = [];

const zipper = (a,b) => {
    for (let i of a) data.push({x: a[i-1],y: b[i-1]});
    return data;
}

data = condition ? zipper(yValues,xValues) : zipper(xValues,yValues );

您会注意到zipper()中的每个动作都会将值为x和y的对象推送到数组中.这就是如何设置chartjs来接收数据(包含值x和y的对象数组),因此请确保遵循该模式.

现在设置轴：

const options = {
    /*Whatever options you have*/,scales: {
        xAxes: condition ? yAxis : xAxis,yAxes: condition ? xAxis : yAxis
    }
}

现在如果你把它放在你的代码中,你所要做的就是切换条件来切换轴.