英文:
Change the Colour of the last segment of line chart in chartjs/react-chart2js
问题
我可以为您提供关于如何访问数组的最后一个元素以更改其颜色的信息。您可以使用ctx.p1DataIndex 来访问数组的最后一个元素。在 last_element 函数中，您可以检查 ctx.p1DataIndex 是否等于数组的长度减去1，以确定当前元素是否为数组的最后一个元素。如果是最后一个元素，您可以返回您想要的颜色，否则返回undefined。
以下是代码示例：
const last_element = (ctx, value) => {
if (ctx.p1DataIndex === historicalData.datasets[0].data.length - 1) {
return value; // 返回您想要的颜色
}
return undefined;
};
请确保在函数内访问 historicalData 对象以获取数据的长度。这样，您可以根据最后一个元素的条件来设置颜色。
英文:
I want to change the colour of last segment of a line chart in react, i am using chartjs library,
import React from "react";
import { Line } from "react-chartjs-2";
import "../Styles/charitem.css";
import {
Chart,
LinearScale,
CategoryScale,
PointElement,
LineElement,
} from "chart.js";
Chart.register(LinearScale, CategoryScale, PointElement, LineElement);
function ChartItem() {
const last_element = (ctx, value) => {
if (ctx.p0DataIndex === 0) {
return value;
}
return undefined;
};
const historicalData = {
labels: Array.from({ length: 7 }, (_, index) => getTimeLabel(index + 9, 0)),
datasets: [
{
label: "Stock Price",
data: Array.from({ length: 6 }, () => getRandomPrice(100, 250)),
borderColor: "blue",
backgroundColor: "rgba(0, 0, 255, 0.2)",
tension: 0.4,
segment: {
borderColor: (ctx) =>
last_element(ctx, "rgba(0, 0, 255, 0.2)") ||
down(ctx, "rgba(255,0,0, 1)") ||
" rgba(0,128,0,1)",
},
},
],
};
return (
<div className="chartitem-div">
<Line data={historicalData} options={options} />
</div>
);
}
// Helper function to generate random price between min and max
function getRandomPrice(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Helper function to format time label
function getTimeLabel(hours, minutes) {
return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(
2,
"0"
)}`;
}
export default ChartItem;
I can do it for the first element using ctx.p0DataIndex in last_element function, how to access the last element of the array so that i can change its colour?
答案1
得分: 0
尽管我没有使用 react-chartjs-2 来完成这个任务，但我认为它应该对你有所帮助。
const lastSegment = function(ctx, value){
if(ctx.p1DataIndex == config.data.datasets[0].data.length-1){
return value
}
}
segment: {
borderColor: ctx => lastSegment(ctx, '#FF0000')
}
我将下一个点的索引与最后一个索引进行比较。如果两者相等，我会将线段的颜色更改为红色。
这里是完整的代码，以查看它的外观。
英文:
Even though I didn't use react-chartjs-2 to do this, I think it should help you.
const lastSegment = function(ctx, value){
if(ctx.p1DataIndex == config.data.datasets[0].data.length-1){
return value
}
}
segment: {
borderColor: ctx => lastSegment(ctx, '#FF0000')
}
I compare the index of the next point with the last index.
If the 2 are equal, I change the colour of the segment to red.
Here's the full code to see what it looks like
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论