如何在react

Question

我正在尝试用图表实现热图。 js在反应。不知道如何开始。我已经安装了图表js。我正在关注这个小提琴

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

出现热图，但由于此x轴标签而使x轴裁剪的具有x轴的.map ovrlaps隐藏在地图下。

// 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>
    )
}

}

请帮忙。