在 xAxis 上的 highcharts 中跳過類別

Question

列表中跳過了類別中的某些元素。 在 X 軸中，但有列。我需要按正確順序列出所有類別。是否有任何建議。請包括 jsfiddle

小提琴演示

 $(function () { $('#container_graph').highcharts({ chart: { type: 'column' }, title: { text: 'Events of Interest by Inmate'// - Last 30 Days' }, xAxis: { tickInterval: 1, categories: ['10000000000050275','2433136','10000000000033173','847432','1688662','2417602','2488320','847324','10000000000050508','10000000000039394','1472668','986736','2505390','2126730','847608','1351346','1163300','2235992','2433172','847544','1350204','1072258','10000000000038760','2433072','958518','2058548','847104','1007642','847088','2237326','937802','2501650','1330470','2058694','1963596','10000000000048800','847562','1346466','10000000000038997','1347520','10000000000045278','10000000000020175','846918','847304','847320','2128070','1448834','847252','847646','10000000000026595','847224','846954','2126248','2415400','2361896','2343500','10000000000027155','10000000000052188','2126888','994038','10000000000044971','2058688','2260188','10000000000006432','1272236','1221744','881792','10000000000044958','881780','2139962','2095872','10000000000006643','1692334','2039862','2207290','1632428','2204646','10000000000046847','10000000000010534','1340552','1781426','2127830','2092820','847108','2433186','2393020','1013122','847026','2436194','846990','10000000000039378','2279736','2522830','10000000000045984','2126848','2405456','10000000000051005','2018202','1770978','2143796','2126750','1253234','2192700'], labels: { rotation: -45, align: 'right', style: { fontSize: '10px', fontFamily: 'Verdana, sans-serif' } } }, yAxis: { min: 0, title: { text: 'Total Calls' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'right', x: -70, verticalAlign: 'top', y: 20, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { formatter: function() { return '<b>'+ this.x +'</b><br/>'+ this.series.name +': '+ this.y +'<br/>'+ 'Total: '+ this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal', cursor: 'pointer', point: { events: { click: function() { switch(this.series.name){ case 'PIN Sharing': window.location ='dev_pin_drilldown.php?i=&dt='+this.category; break; case 'Multiple Speaker': window.location ='dev_multi_drilldown.php?i=&dt='+this.category; break; } } } } } }, series: [ { type: 'column', name: 'PIN Sharing', color:'blue', data: [ 0,4,1,0,4,4,11,9,11,2,5,11,0,1,4,2,1,1,1,5,0,3,1,1,3,6,16,4,0,2,1,3,2,0,7,4,5,1,5,4,1,0,0,3,1,0,1,1,0,1,2,0,2,0,2,0,4,1,2,1,0,1,1,1,0,0,0,0,1,5,0,0,0,3,1,1,1,1,0,0,1,1,0,4,1,1,5,1,1,2,0,0,1,0,2,1,0,0,2,0,0,2,1 ] }, { type: 'column', name: 'Multiple Speaker', color:'yellow', data: [ 1,0,0,1,1,3,0,9,0,0,0,1,2,1,0,1,0,3,3,0,1,2,3,3,0,0,5,0,13,2,1,0,0,2,24,0,0,0,0,1,1,1,7,1,0,1,1,0,2,3,0,1,0,3,0,3,1,0,1,0,1,0,0,0,1,1,1,1,0,4,3,1,2,3,5,5,0,0,1,1,1,4,2,5,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,4,1,0,0 ] } ] }); });

Answer 1

Highcharts 會傾向於刪除一些類別以防止重疊。 我發現防止這種情況的最佳方法是強制執行以下示例中的 tickPositions。

$(function() {
  var categories = ['10000000000050275', '2433136', '10000000000033173', '847432', '1688662', '2417602', '2488320', '847324', '10000000000050508', '10000000000039394', '1472668', '986736', '2505390', '2126730', '847608', '1351346', '1163300', '2235992', '2433172', '847544', '1350204', '1072258', '10000000000038760', '2433072', '958518', '2058548', '847104', '1007642', '847088', '2237326', '937802', '2501650', '1330470', '2058694', '1963596', '10000000000048800', '847562', '1346466', '10000000000038997', '1347520', '10000000000045278', '10000000000020175', '846918', '847304', '847320', '2128070', '1448834', '847252', '847646', '10000000000026595', '847224', '846954', '2126248', '2415400', '2361896', '2343500', '10000000000027155', '10000000000052188', '2126888', '994038', '10000000000044971', '2058688', '2260188', '10000000000006432', '1272236', '1221744', '881792', '10000000000044958', '881780', '2139962', '2095872', '10000000000006643', '1692334', '2039862', '2207290', '1632428', '2204646', '10000000000046847', '10000000000010534', '1340552', '1781426', '2127830', '2092820', '847108', '2433186', '2393020', '1013122', '847026', '2436194', '846990', '10000000000039378', '2279736', '2522830', '10000000000045984', '2126848', '2405456', '10000000000051005', '2018202', '1770978', '2143796', '2126750', '1253234', '2192700'];
    var positions = [];
  for (var i = 0;i < categories.length;i++) {
        positions.push(i);
  }

  $('#container_graph').highcharts({
    chart: {
      type: 'column'
    },
    title: {
      text: 'Events of Interest by Inmate' // - Last 30 Days'
    },
    xAxis: {
      tickPositions: positions,
      categories: categories,
      labels: {
        rotation: -45,
        align: 'right',
        style: {
          fontSize: '10px',
          fontFamily: 'Verdana, sans-serif'
        }
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total Calls'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      align: 'right',
      x: -70,
      verticalAlign: 'top',
      y: 20,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.x + '</b><br/>' +
          this.series.name + ': ' + this.y + '<br/>' +
          'Total: ' + this.point.stackTotal;
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              switch (this.series.name) {
                case 'PIN Sharing':
                  window.location = 'dev_pin_drilldown.php?i=&dt=' + this.category;
                  break;
                case 'Multiple Speaker':
                  window.location = 'dev_multi_drilldown.php?i=&dt=' + this.category;
                  break;
              }
            }
          }
        }
      }
    },
    series: [

      {
        type: 'column',
        name: 'PIN Sharing',
        color: 'blue',
        data: [
          0, 4, 1, 0, 4, 4, 11, 9, 11, 2, 5, 11, 0, 1, 4, 2, 1, 1, 1, 5, 0, 3, 1, 1, 3, 6, 16, 4, 0, 2, 1, 3, 2, 0, 7, 4, 5, 1, 5, 4, 1, 0, 0, 3, 1, 0, 1, 1, 0, 1, 2, 0, 2, 0, 2, 0, 4, 1, 2, 1, 0, 1, 1, 1, 0, 0, 0, 0, 1, 5, 0, 0, 0, 3, 1, 1, 1, 1, 0, 0, 1, 1, 0, 4, 1, 1, 5, 1, 1, 2, 0, 0, 1, 0, 2, 1, 0, 0, 2, 0, 0, 2, 1
        ]
      }, {
        type: 'column',
        name: 'Multiple Speaker',
        color: 'yellow',
        data: [
          1, 0, 0, 1, 1, 3, 0, 9, 0, 0, 0, 1, 2, 1, 0, 1, 0, 3, 3, 0, 1, 2, 3, 3, 0, 0, 5, 0, 13, 2, 1, 0, 0, 2, 24, 0, 0, 0, 0, 1, 1, 1, 7, 1, 0, 1, 1, 0, 2, 3, 0, 1, 0, 3, 0, 3, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 4, 3, 1, 2, 3, 5, 5, 0, 0, 1, 1, 1, 4, 2, 5, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 4, 1, 0, 0
        ]
      }

    ]
  });
});

小提琴： https : //jsfiddle.net/apokryfos/1m94j3j9/