Highcharts columns are thin when 10+ series displayed

蓝咒 提交于 2019-12-12 05:39:39

问题


I faced an issue very similar to this one, but with categorized axis. The problem is that if I add too many series on the plot (more than 10 series) the columns become too thin and almost invisible even though there is enough place for them. Here is how the chart looks like when I have 12 series(11 for bars + 1 for line): The same behaviour appears when I have 11 or 10 series, but when I reduce number of series to 9 (8 for bars + 1 for line) the chart looks absolutely normal:

However when I try recreating this bug with jsfiddle and the same highcharts version (5.0.8) I get absolutely correct behavior no matter how many series I use.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
    endOnTick: false,
                startOnTick: false,
    title: {
                    text: 'xAxisLabel'
                },
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                },
        categories: ["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69"],
                type: 'category'
    },
    yAxis: [                {
                    title: {
                        text: 'SOme'
                    },
                    gridLineWidth: 0
                },
                {
                    title: {
                        text: 'text2'
                    },
                    opposite: true,
                    min: 0,
                    gridLineWidth: 0
                }],
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            stacking: 'normal',
//turboThreshold: 5000,
grouping: false,
                    groupPadding: 0,
                    pointPadding: 0,
                    borderWidth: 0,
                    shadow: false,
                    stickyTracking: false,
                    pointPlacement: 'on',
                    marker: {
                        enabled: false
                    }
        }
    },
    series:[{"name":"Brain Ischemia","data":[[32,1]],"color":"#CC6677","events":{}},{"name":"Cerebral Ischemia","data":[[6,1],[10,1]],"color":"#332288","events":{}},{"name":"Cerebrovascular Ischemia","data":[[32,1]],"color":"#999933","events":{}},{"name":"Focal Brain Ischemia","data":[[16,1]],"color":"#882255","events":{}},{"name":"Ischemia","data":[[8,1]],"color":"#44AA99","events":{}},{"name":"Non-ST Elevation Myocardial Infarction (NSTEMI)","data":[[1,1],[10,1]],"color":"#DDCC77","events":{}},{"name":"Not Confirmed","data":[[5,1]],"color":"#6699CC","events":{}},{"name":"Other","data":[[2,1],[6,1],[69,1]],"color":"#AA4499","events":{}},{"name":"ST Elevation Myocardial Infarction (STEMI)","data":[[1,2]],"color":"#4477AA","events":{}},{"name":"Stable Angina","data":[[0,3],[1,1],[4,1],[8,1],[14,1],[16,1],[28,1],[32,1],[36,1]],"color":"#88CCEE","events":{}},{"name":"Unstable Angina","data":[[1,2],[2,2],[5,1],[11,1],[12,1]],"color":"#117733","events":{}},{"name":"SUBJECTS","data":[[0,124],[1,124],[2,122],[3,122],[4,121],[5,121],[6,120],[7,118],[8,117],[9,116],[10,115],[11,114],[12,111],[13,110],[14,108],[15,106],[16,103],[17,102],[18,102],[19,100],[20,98],[21,98],[22,97],[23,96],[24,96],[25,96],[26,95],[27,95],[28,95],[29,93],[30,93],[31,93],[32,92],[33,91],[34,90],[35,89],[36,87],[37,86],[38,85],[39,84],[40,82],[41,81],[42,80],[43,80],[44,80],[45,80],[46,79],[47,77],[48,77],[49,77],[50,77],[51,77],[52,75],[53,73],[54,73],[55,71],[56,69],[57,69],[58,68],[59,67],[60,67],[61,67],[62,67],[63,67],[64,67],[65,67],[66,67],[67,66],[68,66],[69,66]],"color":"#000000","type":"line","yAxis":1,"dashStyle":"ShortDot","marker":{"enabled":false},"lineWidth":1,"pointPlacement":null,"stickyTracking":false}]
});
<script src="https://code.highcharts.com/5.0.8/highcharts.js"></script>
<script src="https://code.highcharts.com/5.0.8/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

回答1:


It is caused by boost module, more specifically by boost.seriesThreshold property. It tells when the boost should kick in globally (see the source, https://code.highcharts.com/modules/boost.src.js). So, it has nothing to do with the version, simply before (until v5.0.12) seriesThreshold property was set to 10 by default (now it is 50).

Example:
http://jsfiddle.net/p6afwkb3/




回答2:


Already answered similar question here, so this one should be fairly similar. Stupid problem - an outdated highcharts library.

The problem didn't reproduced in jsfiddle, because I didn't included all modules that I have locally of particular version.



来源:https://stackoverflow.com/questions/46346977/highcharts-columns-are-thin-when-10-series-displayed

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!