如何在图表中添加条件填充颜色。

发布于 2025-01-27 20:52:48 字数 1769 浏览 2 评论 0原文

我正在研究项目，要求我将图表设计为以下图：

我正在使用Chart.js并进行反应以制作分布图。但是，我无法弄清楚如何在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轴变量应用条件填充颜色。

原文

I am working on project that requires me to design a chart as the following diagram:

I am using chart.js and react to make the distribution plot. But I am not able to figure out how to add fill color of the area chart between a particular range of values of the x-variable. So far, I am able to achieve this:

I have used the following code to make the area chart as a react component:

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>);
};

I would need some help to apply the conditional fill color based on the x-axis variable.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看春风乍起 2025-02-03 20:52:48

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

我必须在函数的帮助下使用数据配置内的段属性来实现此目的。这是修改的代码：

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

I was able to make some progress on the design that I wanted, so thought of sharing my answer to benefit others. I was able to fill based on x-axis data values and get the following chart:

I had to use the segment property inside data configs to achieve this, with the help of a function. This is the modified code:

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,
            },
        },
    ],
};

Special thanks goes to this youtube series from where I was able to find my answer: https://www.youtube.com/watch?v=st2O-pvhWM4.

I will keep this post open, in case if there is a better solution as I think my solution is not absolutely correct.

回复收藏 0 原文

美人如玉 2025-02-03 20:52:48

您可以将多个数据集与对象数据一起使用，因此可以指定起点和终点。之后，您可以操纵传奇，因此看起来只有一个数据集：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Blood Sugar Measure extra',
        data: [{
          x: "Red",
          y: 5
        }, {
          x: "Blue",
          y: 8
        }],
        backgroundColor: 'lightGray',
        fill: true
      },
      {
        label: 'Blood Sugar Measure',
        data: [{
          x: "Blue",
          y: 8
        }, {
          x: "Yellow",
          y: 12
        }, {
          x: "Green",
          y: 10
        }],
        backgroundColor: 'pink',
        fill: true
      },
      {
        label: 'Blood Sugar Measure extra',
        data: [{
          x: "Green",
          y: 10
        }, {
          x: "Purple",
          y: 12
        }, {
          x: "Orange",
          y: 10
        }],
        backgroundColor: 'lightGray',
        fill: true
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        onClick: (e, legendItem, legend) => {
          const ci = legend.chart;
          const currentlyHidden = ci.getDatasetMeta(0).hidden;

          for (let i = 0; i < ci.data.datasets.length; i++) {
            ci.setDatasetVisibility(i, currentlyHidden)
          }

          ci.update();
        },
        labels: {
          filter: (e) => (!e.text.includes('extra'))
        }
      }
    }
  }
}

var 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/3.7.1/chart.js"></script>
</body>

You can use multiple datasets with object data so you can specify starting and end points. After this you can manipulate the legend so it looks like its only a single dataset:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: 'Blood Sugar Measure extra',
        data: [{
          x: "Red",
          y: 5
        }, {
          x: "Blue",
          y: 8
        }],
        backgroundColor: 'lightGray',
        fill: true
      },
      {
        label: 'Blood Sugar Measure',
        data: [{
          x: "Blue",
          y: 8
        }, {
          x: "Yellow",
          y: 12
        }, {
          x: "Green",
          y: 10
        }],
        backgroundColor: 'pink',
        fill: true
      },
      {
        label: 'Blood Sugar Measure extra',
        data: [{
          x: "Green",
          y: 10
        }, {
          x: "Purple",
          y: 12
        }, {
          x: "Orange",
          y: 10
        }],
        backgroundColor: 'lightGray',
        fill: true
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        onClick: (e, legendItem, legend) => {
          const ci = legend.chart;
          const currentlyHidden = ci.getDatasetMeta(0).hidden;

          for (let i = 0; i < ci.data.datasets.length; i++) {
            ci.setDatasetVisibility(i, currentlyHidden)
          }

          ci.update();
        },
        labels: {
          filter: (e) => (!e.text.includes('extra'))
        }
      }
    }
  }
}

var 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/3.7.1/chart.js"></script>
</body>

回复收藏 0 原文

~没有更多了~