高圖：完全自定義標簽在x軸上的位置

Question

我正在嘗試使用highcharts繪制直方圖，但是服務器正在對數據進行存儲，據我所知，我無法使用直方圖類型。

這是我的圖表：

 Highcharts.chart('container', { credits: { enabled: false }, title: { text: null }, xAxis: { type: 'category', labels: { rotation: -45 } }, series: [ { type: 'variwide', showInLegend: false, data: [ { name: '0.00 - 10.10', y: 13, z: 1260000 }, { name: '10.10 - 34.14', y: 10, z: 3000000 }, { name: '34.14 - 54.56', y: 9, z: 2550000 }, { name: '54.56 - 71.43', y: 15, z: 2110000 }, { name: '71.43 - 102.09', y: 4.6, z: 3830000 }, { name: '102.09 - 161.56', y: 1.8, z: 7430000 }, { name: '161.56 - 217.26', y: 5.7, z: 6960000 }, { name: '217.26 - 301.65', y: 0.7, z: 10550000 }, { name: '301.65 - 382.82', y: 2.8, z: 10150000 }, { name: '382.82 - 874.80', y: 0.2, z: 61500000 } ] } ] }); 

 #container { max-width: 800px; min-width: 380px; margin: 0 auto; } 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/variwide.js"></script> <div id="container"></div> 

如您所見，標簽看起來非常糟糕。

兩種解決方案，我都無法解決：

• 重命名點（我可以執行此操作）並將其移到右側，以便它們位於刻度線下
• 更好的解決方案：使x軸呈線性，並使標簽出現在自然位置，就像通常在線性圖上那樣，類似於https://www.highcharts.com/demo/histogram 。 但是，將軸更改為線性似乎會使整個寬幅圖上的所有內容弄亂了……

有任何想法嗎？

Answer 1

Variwide系列不支持未分類的x軸。 在github上報告為一個問題： https : //github.com/highcharts/highcharts/issues/7359

---

解決方法：

可以使用列序列來模擬Variwide。

為每個點創建一個單獨的系列，然后通過在每個點中放置linkedTo: ':previous'將它們鏈接在一起（第一個除外）。 然后為每個系列設置pointRange 。 pointRange是序列的屬性，不能分配給單個點-這就是為什么必須為每個點創建單獨的序列的原因。

  series: [{
    data: [
      [5, 99]
    ],
    pointRange: 2
  }, {
    linkedTo: ':previous',
    data: [
      [7.5, 72]
    ],
    pointRange: 3
  }, {
    linkedTo: ':previous',
    data: [
      [14, 111]
    ],
    pointRange: 10
  }]

點的x位置指示列的中間。 因此，如果x = 5且pointRange = 2，則該列的范圍從4到6。

不幸的是，當使用多個pointRange值時，Highcharts無法很好地處理極端pointRange 。 設置x軸最小值可解決此問題：

  xAxis: {
    min: 9, // 4 (axis' minimum) + 10 (max point range) / 2 = 9
  },

需要這些plotOptions來實現適當的列寬：

  grouping: false,
  groupPadding: 0,
  pointPadding: 0,

現場演示： http : //jsfiddle.net/BlackLabel/27gr3wh8/

API參考： https ： //api.highcharts.com/highcharts/