как реализовать тепловую карту с chart.js в реакции - PullRequest
Новая
       15

как реализовать тепловую карту с chart.js в реакции

0 голосов
/ 05 июля 2019

Я пытаюсь реализовать тепловую карту с диаграммой. JS в реакции. не знаю с чего начать. Я установил диаграмму JS. Я слежу за этой скрипкой 

http://jsfiddle.net/haisol/wtk8kb1a/

тепловая карта появляется, но ось x обрезана. Ovrlaps карты с осью x из-за этой метки оси x скрыты под картой.

// heatcomponent.js 

class HeatMapComponent extends Component {
    chartRef = React.createRef();

    constructor(props) {
        super(props);
    }

    componentDidMount() {

        const element = this.chartRef.current.getContext("2d");
        new Chart(element, {
         type:'heatmap',
         data: myChartData,
         options:{
             title:{
                 display:true,
                 text:'Test Title'
             },
             scales:{
                 xAxes:[{
                     scaleLabel:{
                         display:true,
                         labelString:'x axes title'
                     }
                 }],
                 yAxes:[{
                     scaleLabel:{
                         display:true,
                         labelString:'y axes title'
                     }
                 }]
             },
             legend:false            

         }
    });
}
render() {
    return (
        <div style={{width: '400px'}}>
        <canvas id="canvas" ref={this.chartRef} height="400" width="600"  ></canvas>
        </div>
    )
}

}

Пожалуйста, помогите.

...