ChartJS 如何在图表中显示百分比符号?

icomxhvb  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(227)

我已经可以检索正确的百分比值。如何显示每个值的百分比符号?图形的代码:

cetgtptt

cetgtptt1#

可以修改工具提示,

<Line
      data={{
<snip>
      options={{
        maintainAspectRatio: false,
        title: {
          display: true,
          text: "Hello",
          fontSize: 20
        },
        plugins: {
          tooltip: {
              callbacks: {
                  label: function(context) {
                      var label = context.dataset.label || '';
                      if (context.parsed.y !== null) {
                          label += ' ' +context.parsed.y + '%';
                      }
                      return label;
                  }
              }
          }
      },
        scales: {
          y: {
            min: 0,
            max: 100,
            ticks: {
              stepSize: 20,
              callback: function (value, index, values) {
                return value + " %";
              }
            }
          }
        },
        legend: {
          labels: {
            fontSize: 25
          }
        }
      }}
    />
vwhgwdsa

vwhgwdsa2#

您可以编辑ticks属性,如下所示:

scales: {
    y: {
        min: 0,
        max: 100,
        ticks: {
            stepSize: 20,
            callback: function(value, index, values) {
                return value + " %";
            }            
        }
    }
},

在这里发现:https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats
似乎奏效了:

相关问题