在 Chart.js 中设置图表标题，x 轴和 y 轴的名称？

Js (文件)是否可以选择数据集来设置图表的名称(标题)(例如我所在城市的温度)、 x 轴的名称(例如天数)和 y 轴的名称(例如温度)。或者我应该用 CSS 来解决这个问题？

var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [data]
}
]


}

非常感谢你的帮助。

181760 次浏览
小开
最佳答案

在 Chart.js 2.0版本中，可以为轴设置标签:

options = {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}

有关详细信息，请参阅 标签文件。

小开

用这个:

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["1","2","3","4","5","6","7","8","9","10","11",],
datasets: [{
label: 'YOUR LABEL',
backgroundColor: [
"#566573",
"#99a3a4",
"#dc7633",
"#f5b041",
"#f7dc6f",
"#82e0aa",
"#73c6b6",
"#5dade2",
"#a569bd",
"#ec7063",
"#a5754a"
],
data: [12, 19, 3, 17, 28, 24, 7, 2,4,14,6],
},]
},
//HERE COMES THE AXIS Y LABEL
options : {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
});
</script>
小开

如果您已经为您的轴设置了标签，如@andyhasit 和@Marcus 所提到的，并且希望在以后更改它，那么您可以尝试这样做:

chart.options.scales.yAxes[ 0 ].scaleLabel.labelString = "New Label";

参考完整配置:

var chartConfig = {
type: 'line',
data: {
datasets: [ {
label: 'DefaultLabel',
backgroundColor: '#ff0000',
borderColor: '#ff0000',
fill: false,
data: [],
} ]
},
options: {
responsive: true,
scales: {
xAxes: [ {
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date'
},
ticks: {
major: {
fontStyle: 'bold',
fontColor: '#FF0000'
}
}
} ],
yAxes: [ {
display: true,
scaleLabel: {
display: true,
labelString: 'value'
}
} ]
}
}
};
小开 
          <Scatter
data={data}
// style=\{\{ width: "50%", height: "50%" }}
options=\{\{
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: "Probability",
},
},
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Hours",
},
},
],
},
}}
/>
小开

对于 Chart.js 版本3

options = {
scales: {
y: {
title: {
display: true,
text: 'Your Title'
}
}
}
}
小开

2021年读者:

版本

"chart.js": "^3.3.2",

真实世界工作样本:

const optionsTemplate = (yAxisTitle, xAxisTitle) => {
return {
scales: {
yAxes: {
title: {
display: true,
text: yAxisTitle,
font: {
size: 15
}
},
ticks: {
precision: 0
}
},
xAxes: {
title: {
display: true,
text: xAxisTitle,
font: {
size: 15
}
}
}
},
plugins: {
legend: {
display: false,
}
}
}
}
小开

在图表 JS 3.5.x 中，在我看来，坐标轴的标题应该设置如下(例如 x 轴的标题 = ‘秒’) :

options: {
scales: {x: { title: { display: true, text: 'seconds' }}}
}

见: https://www.chartjs.org/docs/latest/axes/labelling.html

小开

请参阅 例子与名称的 X轴和 嘿轴左右。

public barChartOptions: ChartOptions = {
title: {
display: true,
text: 'Custom Chart Title',
},
responsive: true,
legend: {
position: 'right',
},
scales: {
yAxes: [
{
position: 'right',
scaleLabel: {
display: true,
labelString: 'Frequency Rate - right',
},
},
{
position: 'left',
scaleLabel: {
display: true,
labelString: 'Frequency Rate - left',
},
},
],
xAxes: [
{
display: true,
position: 'bottom',
scaleLabel: {
display: true,
labelString: 'Titulo do eixo X',
fontStyle: 'italic',
fontSize: 12,
fontColor: '#030',
},
},
],
},
};

提交答案