Как расширить диаграмму js в ReactJS, чтобы показать solid и пунктирную линию вместе? - PullRequest
Новая
       41

Как расширить диаграмму js в ReactJS, чтобы показать solid и пунктирную линию вместе?

0 голосов
/ 13 января 2020

Я хочу нарисовать solid и пунктирную линию вместе в REACT JS, используя диаграмму JS что-то вроде "https://jsfiddle.net/3gxjfndm/3/". Я не мог понять, как я могу расширить диаграмму в моем файле js, так как контекст (ctx) трудно получить. Я понимаю базовую концепцию c, но не могу реализовать ее на моем компоненте React.

Ниже приведена реализация моей линейной диаграммы, которая, как я считаю, является BAD-реализацией. 

import Chart from 'chart.js';

class LineChart extends React.Component {
    constructor(props) {
        super(props);
        this.canvasRef = React.createRef();
    }

  componentDidMount() {
    this.myChart = new Chart(this.canvasRef.current, {
        type: 'line',
        options: {
            responsive: true,
            tooltips: {
                mode: 'index',
                intersect: false,
            },
            hover: {
                mode: 'nearest',
                intersect: true
            },
            legend:{
                display:false,
            },
            scales: {
                x: {
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    }
                },
                y: {
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Value'
                    }
                }
            }
        },
        data: {
            labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'],
            datasets: [{
                label: "My First dataset",
                data: [1, 8, 3, 4, 2, 3, 4],
                borderColor: '#66f',
                borderDash: [20, 30],
                pointBackgroundColor: "transparent"
            },{
                label: "My Dotted dataset",
                data: [null, null, null, null, null, null, 4, 7, 5, 3, 2],
                borderColor: '#66f',
                pointBackgroundColor: "transparent"
            }]
        }
        });
    }


    render() {
        return (
             <div className="chart-section">
                <div className="chart-body">
                    <canvas ref={this.canvasRef} />
                </div>
            </div>
        ) 
    }
}

export default LineChart;```

1 Ответ

0 голосов
/ 13 января 2020

Вы можете использовать реагирующую диаграмму js -2 https://github.com/jerairrest/react-chartjs-2, она реализует диаграмму. js для React, и вы можете называть ее как любой обычный компонент React, когда параметры и наборы данных как на графике. js.

...