我正在 Chart.js 中創(chuàng)建一個水平條形圖，正如您在 jsfiddle 中看到的那樣。我想更改圖表方向，使其從右向左繪制。我dir = rtl在 CSS 中嘗試過direction=rtl，但它們不起作用。這就是我要的：
2 回答
陪伴而非守候
TA貢獻(xiàn)1757條經(jīng)驗 獲得超8個贊
我在文檔中找不到執(zhí)行此操作的本機方法，但您可以通過相當(dāng)簡單的解決方法來實現(xiàn)這一點：否定數(shù)據(jù)，以便 Chart.js 繪制負(fù)值：
反轉(zhuǎn)數(shù)據(jù)集中的值：
data.datasets[0].data.map((currentValue, index, array) => {
array[index] = currentValue * -1;
});
y 軸右對齊：
scales: {
yAxes: [{
position: 'right'
...
重新格式化工具提示以進(jìn)行顯示：
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貢獻(xiàn)1788條經(jīng)驗 獲得超4個贊
您可以在Chart.js v4中使用此方法。低版本中的相同關(guān)鍵字：
var?options?=?{
??scales:?{
??????x:?{?reverse:?true?},
??},
}
- 2 回答
- 0 關(guān)注
- 208 瀏覽
添加回答
舉報
0/150
提交
取消