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

Posted 2023-02-16

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

【英文标题】：In Chart.js set chart title, name of x axis and y axis?

【发布时间】：2015-03-10 17:37:55

【问题描述】：

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

非常感谢您的帮助。

【问题讨论】：

供参考 - ***.com/a/38299304/1374554

【参考方案1】：

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

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

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

【参考方案2】：

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

【讨论】：

该选项应该在图表对象的什么位置设置...？

【参考方案3】：

对于 Chart.js 版本 3

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

【讨论】：

我的浏览器产生了一个错误，因为y 应该是一个对象而不是一个数组。但是，如果我删除方括号，它会起作用。

【参考方案4】：

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

【参考方案5】：

就用这个吧：

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

【讨论】：

我正在使用 Chart_2.5.0.min.js 你可以在这里：cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js

【参考方案6】：

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

【参考方案7】：

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

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

更多详情请见Labelling documentation。

【讨论】：

是的，即使在将其转换为 laravel 图表库选项之后，该语法也可以正常工作。非常感谢我一直在寻找正确的语法，我得到了它