折线图中的动态设计

问题描述

任何人都可以帮助我在reactjs中自定义chartJs折线图

我在这里尝试过，但是还不完美。 我使用chartJs来创建此图形。.但是我面临以下问题。

1. 如果值为null，如何添加虚线
2. 如果在诸如750,720，null，730之类的null值之后存在单个值，我应该如何添加小颜色边框？
3. 我试图将y轴分为4个部分，例如0,250,500,1000，但它不起作用，我只想要 4条线不是y轴线，如图所示。

import React from "react";
import Chart from 'chart.js';

export default class ChartM extends React.PureComponent {
    state ={}
    componentDidMount() {
        let renderConfig = this.getRenderConfig();
        console.log(renderConfig)
        let data= {
            datasets: [{
                data: renderConfig.plottingValues,fill:true,backgroundColor:"#F8E6EB",borderColor:"#ed3561",lineTension:0.4,borderWidth:2,}],labels:renderConfig.labels
        };
        let options ={
            responsive: true,tooltips:{
                enabled:false,backgroundColor:"white",titleFontColor:"black",bodyFontColor:"black",displayColors:false,intersect:true,},hover: {
                animationDuration: 0
            },animation: {
                duration: 0,onComplete: function () {
                    var chartInstance = this.chart,ctx = chartInstance.ctx;
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize,Chart.defaults.global.defaultFontStyle,Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'top';
                    ctx.fillStyle = "black";
        
                    this.data.datasets.forEach(function (dataset,i) {
                        var Meta = chartInstance.controller.getDatasetMeta(i);
                        Meta.data.forEach(function (bar,index) {
                            var data = dataset.data[index];
                            if(dataset.data.length-1 === index)                            
                                ctx.fillText(data,bar._model.x +10,bar._model.y - 0);
                        });
                    });
                }
            },legend: {
                display:false,position: 'bottom',hover: {
                mode: 'label'
            },scales: {
                xAxes: [{
                        display: true,gridLines: {
                            display: false,scaleLabel: {
                            display: false,labelString: 'Month'
                        }
                    }],yAxes: [{
                        display: true,ticks: {
                            beginAtZero: false,suggestedMin:renderConfig.minMax.min,maxTicksLimit:4,max: renderConfig.minMax.max
                        }
                    }]
            },title: {
                display: false,}
        }
        var ctx = document.getElementById('myChart');
        var myLineChart = new Chart(ctx,{
            type: 'line',data: data,options: options
        });
    }
    getRenderConfig() {
        //let values = [{"score":"713","strength":"GOOD","date":"2020-10-10"},{"score":"747","date":"2020-11-10"},{"score":"760","date":"2020-12-10"},"date":"2021-02-10"}];
        let values = [{"score":"713",{"score":null,"date":"2021-02-10"}];
        const { chartData } = this.props;
        let prevDiff = 0;
        let plottingValues = values.map((item,key)=>{
            if(key > 0){
                prevDiff = values[key].score - values[key-1].score
            }
            return item.score;
        })
        this.setState({prevDiff})
        // let minMax = this.getMinMax(values);
        let minMax = { "max": 1000,"min": 0}
        console.log(minMax);
        let labels2 =  this.getLabels(values);
        console.log("labels",labels2);
        console.log("plottingValues",plottingValues);
        //let labels =  this.getLabels(values);
        let labels = [ "OCT'20","NOV'20","DEC'20","JAN'21","FEB'21","MAR'21" ];
        console.log(labels);
        return {minMax,labels,plottingValues}

    }
    getMinMax(values) {
        let min = values.reduce((cum,curr)=>{
            return parseInt(cum.score) < curr.score ? cum : curr
        })
        let max = values.reduce((cum,curr)=>{
            return parseInt(cum.score) > curr.score ? cum : curr
        })
        min = Math.floor(min.score/10) * 10;
        max = Math.ceil(max.score/10) * 10;
        return {min,max}
    }
    getLabels = (dataObj) => {
        let months = {'1':'JAN','2':'FEB','3':'MAR','4':'APR','5':'MAY','6':'JUN','7':'JUL','8':'AUG','9':'SEP','01':'JAN','02':'FEB','03':'MAR','04':'APR','05':'MAY','06':'JUN','07':'JUL','08':'AUG','09':'SEP',10:'OCT',11:'NOV',12:'DEC'}
        let labels = [];
        let lastMonth;
        let lastYear;
        dataObj.forEach((dobj)=>{
            let dateArr = dobj.date.split('-');
            lastMonth = dateArr[1];
            let mon = months[dateArr[1]];
            let yr = dateArr[0].substr(2,3);
            let label = mon + "'" + yr;
            lastYear = yr
            labels.push(label)
        })
        while(labels.length < 6) {
            if(lastMonth != 12){
                labels.push(months[++lastMonth]+"'"+lastYear)
            } else{
                lastMonth = 0;
                lastYear = ++lastYear;
            }
        }
        return labels;
    }
    render() {
        return(
            <div className="credit-history bg-white">
                <canvas id="myChart" width="400" height="200"></canvas>
            </div>
        )
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）