2017-09-21 19 views
0

私はthis oneと非常によく似た問題に直面しましたが、分類された軸を使用しました。 問題があるのは、プロット(10シリーズ以上)に系列が多すぎると、列が薄くなり、十分な場所があるにもかかわらずほとんど見えなくなることです。 ここでは、私は12シリーズ(11行と1行の場合)のようにどのようにグラフになります: 私は11または10シリーズを持っているときに同じ現象が表示されますが、ライン用バー+ 1)のチャートは、絶対に通常になります enter image description here10+シリーズが表示されたときハイチャートの列が薄い

私は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>

答えて

1

これは、ブーストモジュールによって、より具体的にはboost.seriesThresholdプロパティによって引き起こされます。それはブーストがいつグローバルに波及するかを示します(ソース、https://code.highcharts.com/modules/boost.src.js参照)。したがって、バージョンとは関係なく、単純に(v5.0.12まで)seriesThresholdプロパティはデフォルトで10に設定されました(現在は50です)。

例:ブーストモジュールは、このように振る舞う理由ところで
http://jsfiddle.net/p6afwkb3/

+0

は、あなたが任意のアイデアを持っていますか?それはなぜチャートを壊すのですか? – nitoloz

0

はすでに同様の質問に答えhereので、この1はかなり類似していなければなりません。 愚かな問題 - 古くなったハイチャートライブラリ。

私は特定のバージョンのローカルにあるすべてのモジュールを含んでいないので、問題はjsfiddleで再現されませんでした。

関連する問題