在视图数据表和highcharts图之间切换

时间:2019-02-05 11:49:42

标签: javascript jquery highcharts

我有两个高位图。我正在实现导出和下载以及在饼图和条形图之间切换,但是这里有两个问题:

  1. 当我从条形图切换到饼形图时,它不起作用。
  2. 单击视图时,数据表图表应隐藏,并且该表必须显示在图表位置。

please find the code here on jsfiddle.net

[1][:https://jsfiddle.net/GnanaSagar/psnh87ud/16/][1]    

1 个答案:

答案 0 :(得分:0)

如果使用pie图表类型,则只能有一个系列。将pie图表更改为bar图表的最佳方法是将所有数据连接到一个系列或使用其他图表类型。

series: [{
    legendType: 'point',
    name: 'Tokyo',
    colorByPoint: true,
    data: [{
        x: -0.2,
        y: 10,
        name: 'A'
    }, {
        x: 0.2,
        y: 20,
        name: 'B'
    }, {
        x: 0.8,
        y: 25,
        name: 'C'
    }, {
        x: 1.2,
        y: 20,
        name: 'D'
    }, {
        x: 1.8,
        y: 10,
        name: 'E'
    }, {
        x: 2.2,
        y: 20,
        name: 'F'
    }]
}]

要切换数据表:

$('#viewDataTable').click(function() {
    var chart = Highcharts.charts[0],
        chartDiv = $(chart.renderTo);

    if (chartDiv.is(":visible")) {
        chartDiv.hide();
        if (!chart.dataTableDiv) {

            chart.update({
                exporting: {
                    showTable: true
                }
            });
        } else {
            $(chart.dataTableDiv).show();
        }
    } else {
        chartDiv.show();
        $(chart.dataTableDiv).hide();
    }
});

实时演示:https://jsfiddle.net/BlackLabel/zL0agnwt/

API:https://api.highcharts.com/highcharts/exporting.showTable