0

我遇到了一个与这个非常相似的问题,但有分类轴。问题是,如果我在绘图上添加太多系列(超过 10 个系列),即使有足够的空间放置它们,列也会变得太薄并且几乎不可见。以下是当我有 12 个系列时图表的样子(11 个条形图 + 1 个线形图): 在此处输入图像描述 当我有 11 个或 10 个系列时,会出现相同的行为,但是当我将系列数减少到 9 个时(8 个条形图 + 1 个线)图表看起来完全正常: 在此处输入图像描述

但是,当我尝试使用jsfiddle和相同的 highcharts 版本(5.0.8)重新创建此错误时,无论我使用多少系列,我都会得到绝对正确的行为。

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>

4

2 回答 2

1

它是由 boost 模块引起的,更具体地说是由boost.seriesThreshold属性引起的。它告诉何时应该在全球范围内启动提升(参见源代码,https://code.highcharts.com/modules/boost.src.js)。因此,它与版本无关,只是之前(直到 v5.0.12)seriesThreshold属性默认设置为 10(现在是 50)。

示例:http:
//jsfiddle.net/p6afwkb3/

于 2017-09-22T12:39:05.817 回答
0

已经在这里回答了类似的问题,所以这个问题应该非常相似。愚蠢的问题 - 一个过时的 highcharts 库。

这个问题没有在 jsfiddle 中重现,因为我没有包含我在本地拥有的特定版本的所有模块。

于 2017-09-21T15:21:40.523 回答