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

时间:2013-08-30 08:34:56

标签: jquery highcharts

我正在尝试使用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',
            align: 'right',
            x: 4,
            y: 10,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});

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

谢谢,

5 个答案:

答案 0 :(得分:12)

您可以在图表中使用反转参数并更新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'
    });

});

答案 1 :(得分:3)

这对我有用:

df = data.iloc[:, data.columns.str.contains('durations.*'|'shape.*') ]
df.fillna(0)

答案 2 :(得分:0)

这对我有用:

function changeType() {
  var series  = chart.series[0];
  var newType = your_condition_here ? 'column' : 'bar';
  var dataArray = [],
      points = series.data;

  series.chart.addSeries({
      type: newType,
      name: series.name,
      color: series.color,
      data: series.options.data
  }, false);
  series.remove();
}

它将使用新类型创建新系列,并删除旧系列。

可以根据需要免费添加更多选项。

希望它对某人有帮助:)

答案 3 :(得分:0)

您可以在图表级别更新图表类型。由于您在图表属性中设置了类型,因此您需要更新相同的属性。

// Initializing Chart
let probChart = new Highcharts.Chart('container', {
  chart: { 
    type: "line"
  },
});

// Updating Chart Type
probChart.update({
  chart: { type: "column" }
});

答案 4 :(得分:-1)

不确定您是否找到了答案,但我找到了一个对您有用的链接,即使将来参考也是如此。那么请你好好看一下。我正在寻找别的东西,我找到了这个链接,也得到了你的问题。

   [http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-update/][1]

如果这对您有任何帮助,请告诉我或接受我的回答。干杯:)