在react-chartjs 2中,当值小于0时折线图为红色,而值大于0则线图为绿色

时间:2018-08-20 07:05:01

标签: reactjs react-chartjs chartjs-2.6.0

我有一个时间戳(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>
);

} }`

0 个答案:

没有答案