2017-08-09 27 views
1

我創建了HighStock柱形圖表。我已經啓用滾動條使用滾動條:啓用。滾動條適用於較小的數據集,但這個數據集有很多類別(我只包含了我需要的一半)。出於某種原因,在某個數字之後,條形圖的矩形將無法正確顯示(或顯示錯誤的值),而xAxis標籤顯示爲數字而不是實際名稱。此外,我正在嘗試爲每個條添加ID以添加點擊事件,但它僅將ID添加到最初正確呈現的條上。我也注意到,即使使用滾動條,我也可以正確地添加ID到較小的數據集,因爲所有的矩形元素都被正確渲染。有沒有什麼辦法讓這個滾動條適用於更大的數據集?HighStocks/HighCharts滾動條不顯示大數據集,導致xAxis標籤消失並使條不顯示

你就會明白上述問題看起來像在這個環節: https://jsfiddle.net/sauravvenkat/96ue59qy/

Highcharts.chart('container', { 
    chart: { 
     type: 'column', 
     color: 'rgb(245,111,35)', 
    }, 
    title: { 
     text: 'Physicians By Specialty' 
    }, 
    subtitle: { 
     text: 'Source: Physician Specaialty' 
    }, 
    xAxis: { 
     type: 'category', 
     title: { 
      text: null 
     }, 
     scrollbar: { 
      enabled: true 
     }, 
     // min: 0, 
     max: 7, 
     tickLength: 0, 
     labels: { 
      rotation: -60 
     } 
    }, 
    yAxis: { 
     title: { 
      text: 'Profiles', 
      align: 'high' 
     } 
    }, 
    plotOptions: { 
     bar: { 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'Totals', 
     color: 'rgb(245,111,35)', 
     data: [["Spec1",1000],["Spec2", 1000], ["Spec3",500],["Spec4",300],["Spec5",1000],["Spec6", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300],["Spec37",300], ["Spec38",300], ["Spec39",300], ["Spec40",300], ["Spec41",300], ["Spec42",300], ["Spec43",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Spec47",1000],["Spec48", 1000], ["Spec49",500],["Spec50",300],["Spec51",1000],["Spec52", 1000], ["Spec53",500],["Spec54",300],["Spec55",1000],["Spec56", 1000], ["Spec57",500],["Spec58",300],["Spec59",300],["Spec60",300], ["Spec61",300], ["Spec62",300], ["Spec63",300], ["Spec64",300], ["Spec65",300], ["Spec66",300], ["Spec67",300], ["Spec68",300], ["Spec",300],["Spec24",1000],["Spec25", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Unknown",250]] 
    }] 
}); 

回答