从右到左绘制水平条形图

Question

我正在 Chart.js 中创建一个水平条形图，正如您在 jsfiddle 中看到的那样。

我想更改图表方向，使其从右向左绘制。我dir = rtl在 CSS 中尝试过direction=rtl，但它们不起作用。

这就是我要的：

Answer 1

我在文档中找不到执行此操作的本机方法，但您可以通过相当简单的解决方法来实现这一点：否定数据，以便 Chart.js 绘制负值：反转数据集中的值：data.datasets[0].data.map((currentValue, index, array) => {&nbsp; array[index] = currentValue * -1;});y 轴右对齐：scales: {&nbsp; yAxes: [{&nbsp; &nbsp; position: 'right'&nbsp; &nbsp; ...重新格式化工具提示以进行显示：options = {&nbsp; tooltips: {&nbsp; callbacks: {&nbsp; &nbsp; label: function(tooltipItem, data) {&nbsp; &nbsp; &nbsp; var label = data.datasets[tooltipItem.datasetIndex].label || '';&nbsp; &nbsp; &nbsp; if (label) {&nbsp; &nbsp; &nbsp; &nbsp; label += ': ';&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; label += tooltipItem.xLabel * -1;&nbsp; &nbsp; &nbsp; return label;&nbsp; &nbsp; }&nbsp; }&nbsp; ...重新格式化刻度以显示：xAxes: [{&nbsp; ticks: {&nbsp; &nbsp; callback: function(value, index, values) {&nbsp; &nbsp; &nbsp; return value * -1;&nbsp; &nbsp; }...这是一个工作示例：var data = {&nbsp; labels: ["x1", "x2", "x3", "x4", "x5"],&nbsp; datasets: [{&nbsp; &nbsp; label: "Actual",&nbsp; &nbsp; backgroundColor: 'rgba(0, 0, 255, 0.5)',&nbsp; &nbsp; borderWidth: 1,&nbsp; &nbsp; data: [40, 150, 50, 60, 70],&nbsp; &nbsp; yAxisID: "bar-y-axis1"&nbsp; }]};// invert the sign of each of the values.data.datasets[0].data.map((currentValue, index, array) => {&nbsp; array[index] = currentValue * -1;});var options = {&nbsp; tooltips: {&nbsp; &nbsp; callbacks: {&nbsp; &nbsp; &nbsp; label: function(tooltipItem, data) {&nbsp; &nbsp; &nbsp; &nbsp; var label = data.datasets[tooltipItem.datasetIndex].label || '';&nbsp; &nbsp; &nbsp; &nbsp; if (label) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label += ': ';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; label += tooltipItem.xLabel * -1; // invert the sign for display.&nbsp; &nbsp; &nbsp; &nbsp; return label;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; scales: {&nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; id: "bar-y-axis1",&nbsp; &nbsp; &nbsp; categoryPercentage: 0.5,&nbsp; &nbsp; &nbsp; barPercentage: 0.5,&nbsp; &nbsp; &nbsp; position: 'right' // right-align axis.&nbsp; &nbsp; }],&nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; id: "bar-x-axis1",&nbsp; &nbsp; &nbsp; stacked: false,&nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; callback: function(value, index, values) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return value * -1; // invert the sign for tick labelling.&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }]&nbsp; }};var ctx = document.getElementById("canvas").getContext("2d");var myBarChart = new Chart(ctx, {&nbsp; type: 'horizontalBar',&nbsp; data: data,&nbsp; options: options});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script><canvas id="canvas"></canvas>

Answer 2

您可以在Chart.js v4中使用此方法。低版本中的相同关键字：var options = {   scales: {       x: { reverse: true },   }, }