时间戳

首页 > 解决方案 > Chartjs根据Y轴值不同的行背景颜色

javascript - Chartjs根据Y轴值不同的行背景颜色

问题描述

如何为chartjs背景添加多种颜色？我已经添加了单色，但我想要的就像下图一样 在此处输入图像描述

这是我的代码

chartArea: {
          backgroundColor:'rgba(251, 85, 85, 0.2)',
        }

我使用插件服务如下

Chart.pluginService.register({
    beforeDraw: function (chart, easing) {
        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
            var helpers = Chart.helpers;
            var ctx = chart.chart.ctx;
            var chartArea = chart.chartArea;

            ctx.save();
            ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    }
});

谢谢你。

标签： javascriptchart.js

解决方案

这可以通过 chartjs-plugin-annotation 的框注解功能来实现。 https://github.com/chartjs/chartjs-plugin-annotation

推荐阅读