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

chart.js switch x/y axis on line chart

本文关键字：js 折线图 chart      更新时间：2023-09-26

假设我有一个这样的折线图: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,
                        scaleLabel: {
                            display: true,
                            labelString: 'y label'
                        },
                    }]
                }
    }
});

这里x轴是类别标度，y轴是线性标度。我需要交换轴，然而，我找不到如何使x轴线性和y轴类别。

图片说明情况

不仅需要改变坐标轴的值，还需要改变图表本身。

我还没有找到任何表明你可以用线形图来做的东西，但你可以用散点来做。第一步是从xAxes和yAxes中抽象出轴属性:

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

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

let swapAxes = true;
const xValues = [1,2,3,4,5];
const yValues = [5,4,3,2,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
    }
}

现在，如果你把它放在你的代码中，你所要做的就是切换condition来切换轴。

相关文章：