如何使xAxis標籤與條形圖的位置匹配Highchart

我製作了一個向下鑽取高分辨率js庫的條形圖，其中的列具有不同的間隔。因爲我想要製作不同大小的條形圖，所以我使用了加載和渲染功能來更改酒吧的大小。如何使xAxis標籤與條形圖的位置匹配Highchart

現在我不知道如何使xAxis標籤匹配每個欄的當前位置。另外我的工具提示和數據標籤與xAxis標籤有相同的問題，我想知道如何解決這個問題？

// Create the chart 
 
Highcharts.chart('container', { 
 
    chart: { 
 
    type: 'column', 
 
    events: { 
 
     load: function() { 
 

 
     this.series[0].data[0].graphic.attr({ 
 
      x: 10, 
 
      width: 20 
 
     }); 
 
     this.series[0].data[1].graphic.attr({ 
 
      x: 80, 
 
      width: 40 
 
     }); 
 
     this.series[0].data[2].graphic.attr({ 
 
      x: 150, 
 
      width: 80 
 
     }); 
 
     }, 
 
     render: function() { 
 
     console.log(this.series[0].options._levelNumber) 
 
     if (this.series[0].options._levelNumber == 0) { 
 
      this.series[0].data[0].graphic.attr({ 
 
      x: 10, 
 
      width: 20 
 
      }); 
 
      this.series[0].data[1].graphic.attr({ 
 
      x: 80, 
 
      width: 40 
 
      }); 
 
      this.series[0].data[2].graphic.attr({ 
 
      x: 150, 
 
      width: 80 
 
      }); 
 
     } 
 
     } 
 
    } 
 
    }, 
 
    title: { 
 
    text: 'Basic drilldown' 
 
    }, 
 
    xAxis: { 
 
    type: 'category', 
 
    title: { 
 
     enabled: true, 
 
     text: "Percentage Range" 
 
    } 
 
    }, 
 
    yAix: { 
 
    title: { 
 
     enabled: true, 
 
     text: "Number of Schools" 
 
    } 
 
    }, 
 
    legend: { 
 
    enabled: false 
 
    }, 
 

 
    plotOptions: { 
 
    series: { 
 
     borderWidth: 0, 
 
     dataLabels: { 
 
     enabled: true 
 
     } 
 
    } 
 
    }, 
 

 
    series: [{ 
 
    name: 'Things', 
 
    colorByPoint: true, 
 
    data: [{ 
 
     name: '100-70%', 
 
     y: 5, 
 
     drilldown: '100-70%' 
 
    }, { 
 
     name: '70-30%', 
 
     y: 2, 
 
     drilldown: '70-30%' 
 
    }, { 
 
     name: '30-0%', 
 
     y: 4, 
 
     drilldown: '30-0%' 
 
    }] 
 
    }], 
 
    drilldown: { 
 
    series: [{ 
 
     id: '100-70%', 
 
     data: [ 
 
     ['Cats', 4], 
 
     ['Dogs', 2], 
 
     ['Cows', 1], 
 
     ['Sheep', 2], 
 
     ['Pigs', 1] 
 
     ] 
 
    }, { 
 
     id: '70-30%', 
 
     data: [ 
 
     ['Apples', 4], 
 
     ['Oranges', 2] 
 
     ] 
 
    }, { 
 
     id: '30-0%', 
 
     data: [ 
 
     ['Toyota', 4], 
 
     ['Opel', 2], 
 
     ['Volkswagen', 2] 
 
     ] 
 
    }] 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

來源

2017-08-10 YUXUAN XIE

將您串聯成三個獨立的系列，並在每一個不同的'pointPadding'屬性設置。另外，禁用「分組」。例如：https：//jsfiddle.net/a1at7sgb/。 –

@d_paul你好。我想知道如何在改變pointPadding之後縮短這些條之間的空白距離。我也嘗試了pointWidth，但它們不能水平分佈。 –

您可以嘗試使用pointPlacement屬性（http://api.highcharts.com/highcharts/plotOptions.series.pointPlacement）。例如：https：//jsfiddle.net/7vn1nqm0/。 –

而不是使用事件來改變列的寬度，可以與每個數據系列或者使用pointPadding或pointWidth定義。這顯示在圖表正確

系列將

series: [{ 
    name: 'Things', 
    colorByPoint: true, 
    pointPadding: 0, 
    // pointWidth:80, you can use this as well 
    data: [{ 
     name: '100-70%', 
     y: 5, 
     drilldown: '100-70%', 
    }] 
    }, { 
    name: 'Things', 
    colorByPoint: true, 
    pointPadding: 0.2, 
    // pointWidth:100, you can use this as well 
    data: [{ 
     name: '70-30%', 
     y: 2, 
     drilldown: '70-30%' 
    }] 
    }, { 
    name: 'Things', 
    colorByPoint: true, 
    pointPadding: 0.3, 
    // pointWidth:120, you can use this as well 
    data: [{ 
     name: '30-0%', 
     y: 4, 
     drilldown: '30-0%' 
    }] 
    }],

Fiddle示範

來源

2017-08-11 06:51:26

你好。 pointPadding工作得很好。但我不知道如何最小化酒吧之間的距離。我也嘗試過pointWidth，一些酒吧藏在其他酒吧後面。是否可以自定義時間間隔，這樣我可以使酒吧保持彼此接近。 –

你load和render功能做什麼？如果刪除它，看起來一切正常：

Highcharts.chart('container', { 
    chart: { 
     type: 'column', 
    }, 
    title: { 
     text: 'Basic drilldown' 
    }, 
    xAxis: { 
     type: 'category', 
     title:{ 
     enabled:true, 
     text: "Percentage Range" 
     } 
    }, 
     yAix:{ 
    title:{ 
     enabled:true, 
     text: "Number of Schools" 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 

    plotOptions: { 
     series: { 
      borderWidth: 0, 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 

    series: [{ 
     name: 'Things', 
     colorByPoint: true, 
     data: [{ 
      name: '100-70%', 
      y: 5, 
      drilldown: '100-70%' 
     }, { 
      name: '70-30%', 
      y: 2, 
      drilldown: '70-30%' 
     }, { 
      name: '30-0%', 
      y: 4, 
      drilldown: '30-0%' 
     }] 
    }], 
    drilldown: { 
     series: [{ 
      id: '100-70%', 
      data: [ 
       ['Cats', 4], 
       ['Dogs', 2], 
       ['Cows', 1], 
       ['Sheep', 2], 
       ['Pigs', 1] 
      ] 
     }, { 
      id: '70-30%', 
      data: [ 
       ['Apples', 4], 
       ['Oranges', 2] 
      ] 
     }, { 
      id: '30-0%', 
      data: [ 
       ['Toyota', 4], 
       ['Opel', 2], 
       ['Volkswagen', 2] 
      ] 
     }] 
    } 
});

https://jsfiddle.net/w13u9hk9/1/

來源

2017-08-10 23:37:24

原因我想製作不同寬度的酒吧，所以我使用加載和渲染功能來獲得不同的寬度。但我想要其他標籤匹配我現在的酒吧位置，我不知道該怎麼做。 –

如何使xAxis標籤與條形圖的位置匹配Highchart

回答

相關問題