我使用的是 ChartJS 2.8.0,我有以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
</head>
<body>
<div class="reportGraph">
<canvas id="chartJSContainer"></canvas>
</div>
<script>
const labels = ["stable","happy","composed","certainty","active","aggressive",["responsible","causativ"],["correct","estimation"],"appreciative",["communication","level"]];
const labels2 = [["unstable,","dispersed"],"depressed","nervous","uncertainty","inactiv","inhibited","irresponsible","critical",["lack","of","accord"],"withdrawn"];
const data = {
labels: labels,
datasets: [
{
label: "",
data: [-92, -100, -99, -86, 8, 56, -94, -89, -92, -24],
borderColor: "black",
backgroundColor: "transparent",
type: "line",
borderWidth: 2,
order: 0,
lineTension: 0,
fill: false
},
{
label: "Urgently needs attention",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
borderColor: "rgb(221, 221, 221)",
backgroundColor: "rgb(221, 221, 221)",
order: 2
},
{
label: "Requires attention",
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
borderColor: "rgb(136, 136, 136)",
backgroundColor: "rgb(136, 136, 136)",
order: 1
},
{
label: "Acceptable under perfect condition",
data: [0, 0, 0, 0, 0, , 0, 0, 0, 0],
borderColor: "rgb(228, 185, 192)",
backgroundColor: "rgb(228, 185, 192)",
order: 3,
type: "bar"
}
]
};
const config = {
type: "bar",
data: data,
options: {
responsive: true,
legend: {
display: true,
position: 'right',
labels: {
fontColor: 'black',
filter: function(item, chart) {
return item.datasetIndex !== 0;
}
}
},
},
scales: {
y: {
ticks: {
suggestedMin: -100,
suggestedMax: 100
}
},
x: {
position: "bottom",
grid: {
offset: true
}
},
x2: {
position: "top",
grid: {
offset: true
},
labels: labels2
}
}
};
var chart = new Chart(document.getElementById("chartJSContainer"), config);
</script>
</body>
</html>
即使我为它添加了代码,我也无法让 Y 轴从 -100 开始到 100。 此外,我也希望在图表顶部显示相同的 X 轴标签。请对我在此代码上遇到的问题有任何帮助吗?谢谢。
注意:请不要在建议代码时更改库版本 2.8.0。
答案 0 :(得分:1)
您使用的是 V3 语法,版本 2 使用了不同的语法,请查看此链接以获取您所使用版本的文档
具有最小值-最大值的实时示例:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
max: 100
}
}],
xAxes: [{offset: true},
{
position: 'top',
offset: true,
labels: [["unstable,","dispersed"],"depressed","nervous","uncertainty","inactiv","inhibited","irresponsible","critical",["lack","of","accord"],"withdrawn"]
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
</body>