highcharts Highchart,如何调整大小自动如果有大量的数据,然后相应地缩放,使所有的数据可见

wpx232ag  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(274)

Highchart,如何调整大小自动如果有大量的数据,然后相应地缩放,使所有的数据可见。
Link demo
问题是,足球运动员有这么多的信息,图表不能显示他们所有。我想显示所有的数据没有大小和高度限制。只是显示所有的数据。

5gfr0r5j

5gfr0r5j1#

您可以根据点数调整图表的高度。下面是此功能的简单实现:

let spacePerPoint;
 let allowChartRedraw = true;

 Highcharts.chart('container', {
   chart: {
     type: 'bar',
     width: 600,
     height: 600,
     events: {
       load() {
         spacePerPoint = this.plotSizeX / this.series[0].points.length;

         if (this.renderer.forExport) {
           Highcharts.drawTable(this);
         }
       },
       redraw() {
         if (allowChartRedraw) {
           allowChartRedraw = false;

           this.setSize(
             null,
             this.chartHeight - this.plotSizeX + this.series[0].points.length * spacePerPoint
           );

           allowChartRedraw = true;
         }
       }
     }
   },
   ...
 });

现场演示:https://jsfiddle.net/BlackLabel/cy7gd0ab/
**API参考:**https:api.highcharts.com/class-reference/Highcharts.Chart#setSize

相关问题