首頁猿問我可以制作帶有兩個類別軸的水平條形圖嗎？

我可以制作帶有兩個類別軸的水平條形圖嗎？

JavaScript

RISEBY 2021-08-26 16:32:50

我是 chart.js 的新手，我正在嘗試設置一個水平條形圖，在 x 和 y 軸上都有類別。我已經讓軸正確顯示，但沒有顯示任何數據。我嘗試切換到折線圖，同時試圖找出我出錯的地方，并且數據在折線圖上顯示得很好。我可以不使用帶有水平條形圖的兩個類別軸嗎？還是我做錯了什么？這是我必須設置圖表的內容：var config = { type: 'horizontalBar', data: { yLabels: ["Individual Thinking", "Individual Feeling", "Individual Doing", "Partner Thinking", "Partner Feeling", "Partner Doing", "Team Thinking", "Team Feeling", "Team Doing", "Cultural Thinking", "Cultural Feeling", "Cultural Doing"], xLabels: ["","No Complexity","","Below Average","","","Average","Above Average","Highly Focused", "", "", "", "", "Extraordinarily Focused"], datasets: [{ data: ["No Complexity","No Complexity","No Complexity","No Complexity", "No Complexity","No Complexity","No Complexity","No Complexity", "No Complexity","No Complexity","No Complexity","No Complexity"] }] }, options: { responsive: true, title: { display: false, }, scales: { xAxes: [{ type: 'category', display: true, scaleLabel: { display: true, labelString: 'Complexity' } }], yAxes: [{ type: 'category', position: 'left', display: true, scaleLabel: { display: false } }] } }};這里的結果是什么樣子。

查看完整描述

2 回答

夢里花落0921

TA貢獻1772條經驗獲得超6個贊

是的。你可以。我修改了您的代碼以獲得如下所示的輸出。

這是帶有 demo的完整代碼。

您必須在比例尺中添加一個配置回調來更新 x 軸的參數。

這是代碼。

*注意：請同時關注min,max和step size。

//Labels for your x-axis

var xLabels = {

20: 'No Complexity',

40: 'Below Average',

60: 'Average',

80: 'Above Average',

100: 'Highly Focused',

120: 'Extraordinarily Focused'

}

var ctx = document.getElementById('myChart').getContext('2d');

var chart = new Chart(ctx, {

// The type of chart you want to create

type: 'horizontalBar',

// The data for your dataset

data: {

labels: ["Individual Thinking", "Individual Feeling", "Individual Doing",

"Partner Thinking", "Partner Feeling", "Partner Doing",

"Team Thinking", "Team Feeling", "Team Doing",

"Cultural Thinking", "Cultural Feeling", "Cultural Doing"

datasets: [{

label: 'Dataset',

backgroundColor: 'rgb(255, 99, 132)',

borderColor: 'rgb(255, 99, 132)',

data: [27, 25, 50, 45, 110, 62, 30, 100, 56, 28, 87, 30, 71, 23]

}]

// Configuration options go here

options: {

scales: {

xAxes: [{

ticks: {

callback: function(value, index, values) {

return xLabels[value];

beginAtZero: true,

min: 20, //The minimum value in the data range

max: 120, //The maximum value in the data range

stepSize: 20, //The gap between each x-axis index

}

}]

}

});

反對回復 2021-08-26

2 回答
0 關注
194 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

我可以制作帶有兩個類別軸的水平條形圖嗎？

我可以制作帶有兩個類別軸的水平條形圖嗎？

2 回答

添加回答

我可以制作帶有兩個類別軸的水平條形圖嗎？