1. 当container中指定是这个容器的id名时,如果要复用这个组件,那么会在当前id下创建多个一样的图表组件,且样式会乱掉。因为指明了当前id. 解决方案:改用refs去指定即可。
this.chart = new Chart({
container: this.chartRef.current,
autoFit: true,
height: 220,
});
render() {
return <div id="hitogram" ref={this.chartRef} />;
}
2. 当你所使用的图表外侧包裹的容器使用了flex布局,会出现,图表不会自适应屏幕大小,会导致溢出。解决方案:使用百分比布局,不使用flex布局,另外需要延时调用forceFit()方法即可。若你发现遇到纵坐标轴会遮挡的情况,可以使用下面这个方法强制自适应。
setTimeout(() => {
this.chart.forceFit();
}, 0);
3. 当使用了标注线,annotation的时候。在数据更新的时候,上一次的annotation仍然存在,导致会有很多重叠数据。解决方案:需要在绘制标注线之前,先清除标注线。
this.chart.annotation().clear(true);
4. 关闭横轴的label坐标轴的文字的自动旋转功能。由于x轴的自动旋转,文字很大概率会被遮挡,体验很差,所以加上此属性可以规避。
this.chart.axis('time', {
label: {
autoRotate: false, // 关闭自动旋转功能
}
})
5. 当希望展现柱状图中每个柱子的间距很小,且柱子比较紧密。一开始使用了minColumnWidth, maxColumnWidth。使用了柱子的最小宽及最大宽。但这种情况,会有柱子重叠的情况,如下: