javascript - 如何在 Highcharts 中保持多个系列的列宽？

Question

我正在尝试使用 highcharts.js 创建一个包含柱系列和线系列的图表。我使用 pointPadding 和 groupPadding 来控制列宽，按照 documentation 。 但是，当我包含线系列时，列的宽度会缩小。我认为这是因为线系列中的点比柱系列中的点多。有没有办法保持多个系列/不同长度系列的列宽？

Highcharts.chart('container', {
    title: {text: 'Histogram'},
    xAxis: {gridLineWidth: 1},
    series: [{
        pointPadding: 0,
        groupPadding: 0,
        type: 'column',
        name: 'Density',
        data: []
    }, {
        type: 'line',
        name: 'Normal Curve',
        data: []
    }]
});

这是一个带有示例的 jsfiddle: http://jsfiddle.net/dgb751hp/

Answer 1

是的，你说得对。通过添加线系列，列之间的点越多，列就越窄。要解决此问题，只需添加另一个 xAxis，将其链接到第一个，并将第二个系列链接到第二个 xAxis。看看下面的例子。

API引用:
http://api.highcharts.com/highcharts/series.xAxis
http://api.highcharts.com/highcharts/xAxis.linkedTo

示例:
http://jsfiddle.net/9ss538r7/