highcharts Highchart列-列间距不变

nxowjjhe  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(263)

我知道这个主题在Stackoverflow上有点反复出现,但是在搜索了很多帖子之后,我还没有找到解决我的问题的方法。
我有一个柱形图,可以有一个或多个列。列必须有一个固定的,并从左边开始。为了符合客户批准的模型,列之间的空间必须是每列宽度的1. 5倍。
我创建了一个fiddle来复制我目前拥有的。我尝试使用pointPadding和groupPadding,但除非我设置pointWidth,否则列不符合模型。
如何设置列之间的距离?
以下是当前配置:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
            maxPadding: 0,
            minPadding: 0,
            lineWidth: 0,
        tickWidth: 0,
        categories: ['Jan', 'Feb', 'Mar', 'Apr'],
        labels: {
            align: 'center',
            reserveSpace: true
        }
    },
    yAxis: {
            max: 399.71,
        lineWidth: 0,
        lineColor: 'transparent',        
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        labels: {
            enabled: false
        },
        plotLines: [{
            value: 77.28,
            color: '#A8AEB7',
            label: {
                x: 0,
                formatter: function () {
                    return '<span style=color:#616771;>Média</span><br/>77.28'
                },                
                align: 'left',
                style: {
                    color: '#A8AEB7'
                }
            },
        }]
    },
    tooltip: {
        backgroundColor: '#353C47',
        borderColor: '#353C47',
        shadow: false,
        style: {
            color: '#ffffff',
            fontSize: '10px'
        }
    },
    plotOptions: {
        series: {
                pointWidth:25,
            pointPadding: 0,
            borderWidth: 0,
            borderRadius: 13,
            point: {
                events: {
                    mouseOver: function() {    
                        this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x].style='font-weight:bold';
                        },
                        mouseOut: function() {                 
                        this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x].style='font-weight:normal';
                        }
                }
            }       
        }
    },

    series: [{
        data: [-48.54,279.92, -321.99,399.71]
    }]
});

https://jsfiddle.net/marioandrade/L2u4pkxm/16/
作为对塞巴斯蒂安Wdzel评论的回答,理想的布局应该是这样的,列数是动态的,在1到12之间,但总是从左边开始,列间距与图中所示的相同。添加空列或值为零的列对客户来说是不可接受的。

9njqaruj

9njqaruj1#

根据塞巴斯蒂安的评论,我设法得到了以下答案:

  • 在xAxis上,我添加了一个max值,其中包含要在图表上显示的列数。
  • 添加了left属性以将x轴向右推,使其不会与绘图线重叠
  • 已格式化xAxis的标签输出,使其仅返回具有月份名称的值。否则,即使值为空,它也将返回列的编号。
xAxis: { 
  left: 80,
  max: 6, 
  lineWidth: 0, 
  tickWidth: 0, 
  categories: ['Jan', 'Feb', 'Mar', 'Apr'], 
  labels: { 
    formatter: function() { 
      if(this.value.length > 2) { return this.value; } 
    } 
  } 
}

我创建了一个小提琴与此实现。希望它可以有帮助。https://jsfiddle.net/marioandrade/L2u4pkxm/29/
但是,如果你有其他可能的解决方案,请分享它们。

相关问题