1

我想逐步建立一个Highchart。我让它工作了，但我对它的动画方式不满意。在这种情况下，动画原点是 y 轴，但我希望条形图从 x 轴上升。当我在加载时看到数据时，它们确实从 x 轴上升。但是，我想从一个空图表开始。

http://jsfiddle.net/ueC9g/1/

这就是我初始化 highcharts 的方式：

new Highcharts.Chart ({
    chart: {
        type: 'column',
        renderTo: 'columnChart'
    },
    title: {
        text: 'Great chart'
    },
    xAxis: {
        categories: ['<5', '5-9', '10-14','15-19','20-24','25-29','30-39','40-49','50-59','60-69','>69'],
        min: 0,
        max: 10,
        title: {
            text: 'Age'
        },
        showEmpty: true
    },
    yAxis: {
        title: {
            text: 'Some numbers'
        },
        min: 0,
        max: 20,
        showEmpty: true,
        alternateGridColor: '#eee'
    },
    series: [{
        name: 'male',
        data: [1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]
    }, {
        name: 'female',
        data: [2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]
    }],
    plotOptions: {
        column: {
            events: {

            }
        }
    },
    credits: {
        enabled: false
    }
});
4

2 回答 2

1

显示/隐藏系列时，highcharts 将动画更改为轴而不是系列本身。我无论如何都找不到改变这种行为。作为一种解决方法，而不是显示/隐藏系列，为什么不在单击时将其添加为新系列：

var i = 0;

$('#addBar').click(function(){
    try {
        if (i == 0) {
            columnChart.addSeries({name:'male',data:[1, 1, 5, 8, 10, 15, 19, 14, 10, 8, 4]});
        }
        else if (i == 1) {
            columnChart.addSeries({name:'female',data:[2, 1, 3, 4, 5, 6, 8, 4, 4, 3, 2]});
        }
        i++;                
    } catch(e){
        console.dir(e);
    }
});

我也在我的配置中设置了一个初始的空系列，以便轴在开始时绘制：

series: [{visible: false, showInLegend: false}],

在此处查看更新的小提琴。

于 2013-09-06T16:55:30.460 回答
0

请熟悉此示例：http: //jsfiddle.net/VcJ4K/5/

 $.each(chart.series[0].data, function(i, point) {

        window.setInterval(function() {
            point.update(point.y2); 
        }, 500);

    });
于 2013-09-06T15:16:01.367 回答