[英]chart.js switch x/y axis on line chart
Let's say I have a line chart like this: https://jsfiddle.net/13fyhL4j/ 假设我有一个这样的折线图: https : //jsfiddle.net/13fyhL4j/
HTML: 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: 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'
},
}]
}
}
});
Here x axis has category scale and y axis has linear scale. 这里x轴具有类别比例,y轴具有线性比例。 I need to swap axis, however, I cannot find how to make x axis linear and y axis category.
我需要交换轴,但是,我找不到如何使x轴线性和y轴类别。
Image explaning situation 图像解释情况
It is necessary to change not only the axis values, but also the chart itself. 不仅要更改轴值,还要更改图表本身。
I haven't been able to find anything that indicates you can do it with a line graph, but you could do it with scatter. 我无法找到任何表明你可以用折线图做到的东西,但你可以用散点图来做。 The first step is abstracting away the axis properties from
xAxes
and yAxes
: 第一步是从
xAxes
和yAxes
抽象出轴属性:
const xAxis = [{
/*type: 'time', time: { displayFormats: {} }, whatever*/
}];
const revenueAxis = [{
/*scaleLabel: {}, ticks: {}, whatever*/
}];
Then you decide which data set to put on which axis by whatever condition you define: 然后根据您定义的条件决定将哪个数据集放在哪个轴上:
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 );
You'll notice that each action in zipper()
pushes an object with the values x
and y
onto an array. 您会注意到
zipper()
中的每个动作都会将值为x
和y
的对象推送到数组中。 This is how chartjs is set up to receive data (an array of objects containing the values x
and y
), so make sure you follow that pattern. 这就是如何设置chartjs来接收数据(包含值
x
和y
的对象数组),因此请确保遵循该模式。
Now set the axes: 现在设置轴:
const options = {
/*Whatever options you have*/,
scales: {
xAxes: condition ? yAxis : xAxis,
yAxes: condition ? xAxis : yAxis
}
}
Now if you put that in your code, all you have to do is toggle condition
to switch axes. 现在如果你把它放在你的代码中,你所要做的就是切换
condition
来切换轴。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.