如何在Chart.js面积图中添加条件填充颜色？

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

关注(0)|答案(2)|浏览(172)

我正在进行的项目需要我设计一个图表，如下图：

我正在使用chart.js和react来制作分布图。但是我还不能弄清楚如何在x变量的特定值范围之间添加面积图的填充颜色。到目前为止，我可以做到这一点：

我已经使用下面的代码将面积图制作成一个react组件：

const data = {
    labels: {DataLabel},
    datasets: [
        {
            label: 'Blood Sugar Measure',
            data: {Data},
            fill: true,
            backgroundColor: ["#E5E5E5", "#E5E5E5", "#B4EDB3", "#B4EDB3", "#E5E5E5"],
            pointBorderColor: "#8884d8",
            pointBorderWidth: 2,
            pointRadius: 3,
            tension: 0.4
        },
    ],
};

const options = {
    plugins: { legend: { display: false } },
    layout: { padding: { bottom: 0.1 } },
    scales: {
        y: {
            display : false,
            beginAtZero: true,
            grid: {
                display: false
            },
            ticks: {
                color: "#000000",
                font: {
                    size: 18
                }
            }
        },
        x: {
            beginAtZero: true,
            grid: {
                display: false
            },
            ticks: {
                color: "#000000",
                font: {
                    size: 10
                },
                min: 0
            }
        }
    },
};

export const DistChart = () => {

    return (<div className="App">
        <Line data={data} options={options} />
    </div>);
};

我需要一些帮助来应用基于x轴变量的条件填充颜色。

chart.js

来源：https://stackoverflow.com/questions/72192165/how-to-add-conditional-fill-color-in-chart-js-area-chart

2条答案

按热度按时间

uelo1irk1#

您可以将多个数据集与对象数据一起使用，以便指定起点和终点。然后，您可以操作图例，使其看起来像是唯一的一个数据集：
第一个

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

pcrecxhr2#

我能够在我想要的设计上取得一些进展，因此想到分享我的答案以使其他人受益。我能够基于X轴数据值填充并得到以下图表：

我不得不在数据配置中使用segment属性来实现这一点，这是一个函数的帮助。

const highlightRegion = (ctx, value) => {

    if (ctx.p0DataIndex > boundary_val1 && ctx.p0DataIndex < boundary_val2) {
        return "#B4EDB3";
    }
    return "#E5E5E5";
};

const bgColor = ctx => highlightRegion(ctx, "#B4EDB3");

const data = {
    labels: x_values,
    datasets: [
        {
            label: 'Count',
            data: [0, 20, 40, 80, 150, 80, 30, 0],
            pointRadius: 0,
            fill: true,
            tension: 0.4,
            segment: {
                backgroundColor: bgColor,
                borderColor: bgColor,
            },
        },
    ],
};

特别感谢这个youtube系列，从那里我能够找到我的答案：https://www.youtube.com/watch?v=st2O-pvhWM4。
我会保持这个职位开放，以防万一，如果有一个更好的解决方案，因为我认为我的解决方案不是绝对正确的。

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

我来回答

如何在Chart.js面积图中添加条件填充颜色？

2条答案

相关问题

热门标签

最新问答