如何在 Chart.js v2.9.4 (grace) 中的最高栏顶部添加额外的刻度？

Question

我想知道如何在 Chartjs 的最高栏顶部添加一个额外的勾号。
我不喜欢图形在 25 点后停止的方式（见图），我希望它再多一点点停止（在本例中为 30）。我使用 V2.9.4 的原因是因为我在 Nuxt 中使用它和 Vuejs 版本的 Chartjs。
我确实发现在最新版本的 Chartjs 中它被称为 grace。
我无法用 V2.9.4 版本的 Chartjs 真正找到我的问题的答案。
代码不是很相关，但仍然包含它。

BarChart.vue（组件）


    <script>
    import {Bar} from "vue-chartjs";
    
    export default {
      extends: Bar,
      props: {
        data: {
          type: String,
          default: () => {},
        },
        options: {
          type: Object,
          default: () => {},
        },
      },
      computed: {
        Chart() {
          return['data', 'options'];
        },
      },
      mounted() {
        this.renderChart(this.data, this.options);
      },
    };
    </script>

HTML:


    <div class="chart">
      <BarChart :data="barChartData" :options="barChartOptions" :height="200"/>
    </div>

脚本：


    <script>
    import BarChart from "~/components/plugins/BarChart";
    
    export default {
      components: {
        BarChart,
      },
      data() {
        return {
          barChartData: {
            labels: ["Verzonden", "Ontvangen", "Geopend", "Kliks"],
            datasets: [
              {
                data: [25, 20, 20, 18],
                backgroundColor: [
                  '#7782FF',
                  '#403DD3',
                  '#FFB930',
                  '#00E437',
                ],
                barThickness : 50,
              },
            ],
          },
          barChartOptions: {
            responsive: true,
            plugins: {
              customScale: {
                grace: '100%',
              },
            },
            legend: {
              display: false,
            },
            scales: {
              xAxes: [
                {
                  gridLines: {
                    display: false,
                  },
                  ticks: {
                    fontColor: "black",
                    fontSize: 14,
                  },
                },
              ],
              yAxes: [
                {
                  ticks: {
                    beginAtZero: true,
                    min: 0,
                    stepSize: 5,
                    fontColor: '#ABACB3',
                  },
                  gridLines: {
                    display: true,
                    borderDash: [4, 4],
                    color: '#EEEDFB',
                    drawBorder: false,
                  },
                },
              ],
            },
          },
        };
      },
    };
    </script>

This is how it looks now

This is how I want it to look

提前致谢。 :)

Answer 1

您可以使用自定义插件来实现：

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 20, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      customScale: {
        grace: '100%', // Percentage of max value
        // grace: 40 // Flatout extra value to add
      }
    }
  },
  plugins: [{
    id: "customScale",
    beforeLayout: (chart, options, c) => {
      let max = Number.MIN_VALUE;
      let min = Number.MAX_VALUE
      let grace = options.grace || 0

      chart.data.datasets.forEach((dataset) => {
        max = Math.max(max, Math.max(...dataset.data));
        min = Math.min(min, Math.min(...dataset.data))
      })

      if (typeof grace === 'string' && grace.includes('%')) {
        grace = Number(grace.replace('%', '')) / 100

        chart.options.scales.yAxes[0].ticks.suggestedMax = max + (max * grace)
        chart.options.scales.yAxes[0].ticks.suggestedMin = min - (min * grace)

      } else if (typeof grace === 'number') {

        chart.options.scales.yAxes[0].ticks.suggestedMax = max + grace
        chart.options.scales.yAxes[0].ticks.suggestedMin = min - grace

      }

    }
  }]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

编辑：

我假设 'BarChart' 是来自外部库的包装器组件，在这种情况下，您需要将插件传递给它。我想必须这样做，但您可能需要检查您正在使用的特定包装器的文档：

<BarChart :data="barChartData" :options="barChartOptions" :plugins="[plugin]" :height="200"/>

const plugin = {
  id: "customScale",
  beforeLayout: (chart, options, c) => {
    let max = Number.MIN_VALUE;
    let min = Number.MAX_VALUE
    let grace = options.grace || 0

    chart.data.datasets.forEach((dataset) => {
      max = Math.max(max, Math.max(...dataset.data));
      min = Math.min(min, Math.min(...dataset.data))
    })

    if (typeof grace === 'string' && grace.includes('%')) {
      grace = Number(grace.replace('%', '')) / 100

      chart.options.scales.yAxes[0].ticks.suggestedMax = max + (max * grace)
      chart.options.scales.yAxes[0].ticks.suggestedMin = min - (min * grace)

    } else if (typeof grace === 'number') {

      chart.options.scales.yAxes[0].ticks.suggestedMax = max + grace
      chart.options.scales.yAxes[0].ticks.suggestedMin = min - grace

    }

  }
}

如何在 Chart.js v2.9.4 (grace) 中的最高栏顶部添加额外的刻度？

How to add an extra tick on top of the highest bar in Chart.js v2.9.4 (grace)?

html

css

chart.js

vue-chartjs