在Chart.js 3.8(最新版本)中如何在轴上显示标签

btqmn9zl 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(160)

在Chart.js 3.0中，我想显示x轴的标题。
通过阅读https://www.chartjs.org/docs/latest/axes/labelling.html链接处的文档，我将此代码添加到选项中

options: {
         scales: {
         x: {
                 display: true,
                 text: 'Price',
                 color: 'rgb (12, 70, 14)',
             }
         }
     }

但看不到标签，则完整的代码如下：

<html>
<head>
</head>
<body>

<canvas id="myChart" width="400" height="400"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

const labels = [
    '1740.00',
    '1750.00',
    '1760.00',

  ];

  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(12, 70, 14)',
      borderColor: 'rgb(12, 70, 14)',
      data: [444000, 790000, 1550000],
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                display: true,
                text: 'Price',
                color: 'rgb(12, 70, 14)',
            }
        }
    }
  };

  const myChart = new Chart(
            document.getElementById('myChart'),
            config
          );
</script>

</body>
</html>

chart.js

来源：https://stackoverflow.com/questions/72732304/in-chart-js-3-8-latest-release-how-to-show-labels-on-axis

1条答案

按热度按时间

mqkwyuun1#

我自己找到了解决办法：）

const config = {
    type: 'line',
    data: data,
    options: {
          scales: {
            x: {
              title: {
                display: true,
                text: 'Date'
              },
            },
            y: {
              title: {
                display: true,
                text: 'value'
              }
            }
          }
        }
  };

赞(0）回复(0）举报 2022-11-07

我来回答

在Chart.js 3.8(最新版本)中如何在轴上显示标签

1条答案

相关问题

热门标签

最新问答