highcharts jquery动态更改图表类型列到栏

前端之家收集整理的这篇文章主要介绍了highcharts jquery动态更改图表类型列到栏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用 jquery切换图形类型.

我找到了通过使用函数改变图表类型(无需重新创建新图表)的方法

series [i] .update({type:chartType});

我的第一个问题是:有一种方法可以改变所有图表,而不仅仅是系列?如果不继续阅读:)

但是有了这个功能,我无法使’bar’图表正常工作.它就像一个柱形图.正如您所看到的那样,馅饼示例正在作为例外工作.

酒吧:http://www.highcharts.com/demo/bar-basic

它是如何工作的(示例):

<div id="top10_" style="float:left">
    <button id="set_column">column</button>
    <button id="set_bar">bar</button>
    <button id="set_pie">pie</button>
</div>
<div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
$('#set_column').click(function () {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#' + chart).highcharts().series[0].update({
        type: "column"
    });
});
$('#set_bar').click(function () {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#' + chart).highcharts().series[0].update({
        type: "bar"
    });
});
$('#set_pie').click(function () {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#' + chart).highcharts().series[0].update({
        type: "pie"
    });
});

Highcharts创作:

$('#top10').highcharts({
    chart: {
        type: 'column',margin: [50,50,100,80]
    },title: {
        text: 'TOP10'
    },subtitle: {
        text: ' '
    },credits: {
        enabled: false
    },xAxis: {
        categories: ['1','2','3','4'],labels: {
            rotation: -45,align: 'right',style: {
                fontSize: '13px',fontFamily: 'Verdana,sans-serif'
            }
        }
    },yAxis: {
        min: 0,title: {
            text: 'Ilość'
        }
    },legend: {
        enabled: false
    },tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' + 'Ilość: ' + this.y;
        }
    },series: [{
        name: 'Ilość zgłoszeń,TOP10',data: [1,2,3,43],dataLabels: {
            enabled: true,rotation: -90,color: '#FFFFFF',x: 4,y: 10,sans-serif'
            }
        }
    }]
});

这是一个小提琴的例子:http://jsfiddle.net/supergg/zqvNq/4/

谢谢,

解决方法

您可以在图表中使用反转参数并更新yAxis. http://jsfiddle.net/n9xkR/8/
$('#bar').click(function () {


    chart.inverted = true;
    chart.xAxis[0].update({},false);
    chart.yAxis[0].update({},false);
    chart.series[0].update({
        type: 'column'
    });

});

猜你在找的jQuery相关文章