【问题标题】:Highchart with dynamic scale for both series两个系列都具有动态比例的 Highchart
【发布时间】:2017-03-06 14:47:52
【问题描述】:

问题与this one有关。

问题:目前我有 2 个系列的图表 - 一个带有正值的系列和一个带有负值的系列。默认情况下,每个系列都有动态缩放,但它们不相关(我的意思是,如果第一个系列的 20 是最大值,第二个系列的 5 是最大值,那么它在图表上看起来是一样的)。当我将最大值和最小值设置为 yAxis 时,它解决了问题,但增加了很多空白空间,在某些情况下,列太小了。我可以将图表设置更新为动态缩放,但两个系列都有一个吗?

这是我的示例,其中为 yAxis http://jsfiddle.net/futw5e8k/6/ 设置了 MAXMIN

Highcharts.chart('container', {

chart: {
    type: 'column'
},

title: {
    text: null
},

xAxis: {
    categories: ['13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
    offset: -150,
    lineWidth: 0,
    tickWidth: 0
},

yAxis: [{
    title: {
        text: null,
    },

    top: 50,
    height: 124,
    min: 0,
    max: 100,
    gridLineColor: 'transparent',
    gridLineWidth: 0,
        minorGridLineWidth: 0,
    labels: {
        enabled: false
    }
},{
        title: {
        text: null
    },
    top: 200,
    height: 150,
    offset: 0,
    min: -100,
    max: 0,
    gridLineColor: 'transparent',
    gridLineWidth: 0,
        minorGridLineWidth: 0,
    labels: {
        enabled: false
    }
}],

plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none',
                formatter: function() {
                        return Math.abs(this.y);
                        }
            }
        }
    },
    tooltip: {
    formatter: function() {
        return this.x + '<br/>' + this.series.name + ': ' + Math.abs(this.y);
    }
},
series: [{
    name: 'John',
    data: [1, 13, 20, 19, 15, 7, 2]
}, {
    name: 'Joe',
    yAxis: 1,
    data: [-0.35, -6, -9, -16, -3, -1.5, -0.25]
}]

});

【问题讨论】:

    标签: javascript charts highcharts scale


    【解决方案1】:

    在加载事件时,您可以找到数据的最大值并动态更新轴的最大值 - 请参阅 Axis.update()

      chart: {
    type: 'column',
    events: {
      load: function() {
        const max = Math.max(this.series[0].dataMax, this.series[1].dataMax);
    
        this.yAxis[0].update({
          max: max,
        }, false);
    
        this.yAxis[1].update({
          max: max,
          top: 130
        }, false);
    
        this.redraw(false);
      }
    }
    },
    

    示例:http://jsfiddle.net/futw5e8k/7/

    【讨论】:

    • 对于负y轴,需要指定min而不是max。此外,@demo,您需要确保您的轴 heights 相同,否则使极端匹配无法实现您的目标。更新小提琴:jsfiddle.net/futw5e8k/10
    • 一条评论 - 就我而言,正确的最大值将是 const max = Math.max(this.series[0].dataMax, Math.abs(this.series[1].dataMin));
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多