如何在 chartjs 中显示百分比符号？

Question

我已经可以检索到正确的百分比值。如何显示每个值的百分比符号？

我也在 codesandbox 中重新创建了这个： https://codesandbox.io/s/filter-and-reduce-data-per-month-forked-cy4bl?file=/src/App.js&fbclid=IwAR2-kG5GC-t_s9ueFJBvSsYIGkNeDWYITgBnCcTbIoGKls769fyO_hpHtvA

下面是图表的代码：

      <div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        views={["year"]}
        label="Year"
        value={selectedDate}
        minDate={new Date("01/01/2021").toString()}
        onChange={handleDateChange}
        animateYearScrolling
      />
    </MuiPickersUtilsProvider>
  </div>
  <div>
    <Line
      data={{
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "1st Dose",
            data: realDoses,
            backgroundColor: ["red"],

            borderWidth: 1
          },
          {
            label: "2nd Dose",
            data: realDoses2,
            backgroundColor: ["orange"]
          }
        ]
      }}
      height={400}
      width={600}
      options={{
        maintainAspectRatio: false,
        title: {
          display: true,
          text: "Hello",
          fontSize: 20
        },
        scales: {
          y: {
            min: 0,
            max: 100,
            ticks: {
              stepSize: 20
            }
          }
        },
        legend: {
          labels: {
            fontSize: 25
          }
        }
      }}
    />
  </div>
</div>

Answer 1

您可以像这样编辑 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

似乎可以解决问题：

Answer 2

工具提示可以这样修改

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

如何在 chartjs 中显示百分比符号？

How can I display the percentage symbol inside the chartjs?

javascript

charts

reactjs

chart.js