我有一个时间戳(x轴)和利润/亏损(y轴)的数据集,这些数据集将绘制在react-chartjs2的折线图上。我的问题是,如果某个特定时间戳的值大于零,则要求我将行涂成绿色,如果时间戳的值小于零,则将行涂成红色。请帮帮我。谢谢。
我的代码:
class LineChart extends Component {
constructor(props) {
super(props);
}
render() {
const data = {
labels: ['8.00', '10.00', '12.00', '14.00', '16.00'],
datasets: [
{
label: '',
fill: false,
lineTension: 0.1,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointRadius: 1,
pointHitRadius: 10,
data: [45, 59, 69, -35, 50]
}
]
};
const chartOptions = {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: '#2bf4a8'
},
gridLines: {
color: 'rgba(43, 244, 268, .5)',
zeroLineColor: 'red'
}
}],
xAxes: [{
ticks: {
fontColor: '#2bf4a8',
autoSkip: false,
fontSize: 7
},
gridLines: {
color: 'rgba(43, 244, 268, .5)',
display: false,
zeroLineColor: 'red'
}
}]
}
}
return (
<div className="chart-holder">
<Line data={data} options={chartOptions} height={10} width={20} />
</div>
);
} }`