我正在 Chart.js 中创建一个水平条形图，正如您在 jsfiddle 中看到的那样。我想更改图表方向，使其从右向左绘制。我dir = rtl在 CSS 中尝试过direction=rtl，但它们不起作用。这就是我要的：
2 回答
陪伴而非守候
TA贡献1757条经验 获得超8个赞
我在文档中找不到执行此操作的本机方法，但您可以通过相当简单的解决方法来实现这一点：否定数据，以便 Chart.js 绘制负值：
反转数据集中的值：
data.datasets[0].data.map((currentValue, index, array) => {
array[index] = currentValue * -1;
});
y 轴右对齐：
scales: {
yAxes: [{
position: 'right'
...
重新格式化工具提示以进行显示：
options = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.xLabel * -1;
return label;
}
}
...
重新格式化刻度以显示：
xAxes: [{
ticks: {
callback: function(value, index, values) {
return value * -1;
}
...
这是一个工作示例：
var data = {
labels: ["x1", "x2", "x3", "x4", "x5"],
datasets: [{
label: "Actual",
backgroundColor: 'rgba(0, 0, 255, 0.5)',
borderWidth: 1,
data: [40, 150, 50, 60, 70],
yAxisID: "bar-y-axis1"
}]
};
// invert the sign of each of the values.
data.datasets[0].data.map((currentValue, index, array) => {
array[index] = currentValue * -1;
});
var options = {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.xLabel * -1; // invert the sign for display.
return label;
}
}
},
scales: {
yAxes: [{
id: "bar-y-axis1",
categoryPercentage: 0.5,
barPercentage: 0.5,
position: 'right' // right-align axis.
}],
xAxes: [{
id: "bar-x-axis1",
stacked: false,
ticks: {
callback: function(value, index, values) {
return value * -1; // invert the sign for tick labelling.
},
beginAtZero: true
}
}]
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
尚方宝剑之说
TA贡献1788条经验 获得超4个赞
您可以在Chart.js v4中使用此方法。低版本中的相同关键字：
var options = {
scales: {
x: { reverse: true },
},
}
- 2 回答
- 0 关注
- 147 浏览
添加回答
举报
0/150
提交
取消