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

Question

Chart.js (documentation) 是否有数据集选项来设置图表名称（标题）（例如我所在城市的温度）、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]
        }
    ]

}

非常感谢您的帮助。

Answer 1

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

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

有关详细信息，请参阅 Labelling documentation。

Answer 2

只需使用这个：

<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>

Answer 3

如果您已经像@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'
          }
        } ]
      }
    }
  };

Answer 4

          <Scatter
            data={data}
            // style={{ width: "50%", height: "50%" }}
            options={{
              scales: {
                yAxes: [
                  {
                    scaleLabel: {
                      display: true,
                      labelString: "Probability",
                    },
                  },
                ],
                xAxes: [
                  {
                    scaleLabel: {
                      display: true,
                      labelString: "Hours",
                    },
                  },
                ],
              },
            }}
          />

Answer 5

对于 Chart.js 版本 3

options = {
  scales: {
    y: [{
      title: {
        display: true,
        text: 'Your Title'
      }
    }]
  }     
}

Answer 6

致 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,
            }
        }
    }
}

Answer 7

在图表 JS 3.5.x 中，在我看来轴的标题应设置如下（x 轴的示例，标题 = 'seconds'）：

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

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

Answer 8

参见example，名称为x轴和y左右轴。

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',
          },
        },
      ],
    },
  };

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

In Chart.js set chart title, name of x axis and y axis?

charts

title

chart.js

致 2021 年的读者：

版本

真实世界工作样本：