Question

我正在搜索一项功能，该功能将允许我使用highcharts提供的上下文菜单从饼图切换为条形图（然后再返回）。下图显示了我希望将图表开关放置在的位置。

enter image description here

这是我到目前为止所做的：

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Browser market shares in January, 2018'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        style: {
          color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        }
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'Internet Explorer',
      y: 11.84
    }, {
      name: 'Firefox',
      y: 10.85
    }, {
      name: 'Edge',
      y: 4.67
    }, {
      name: 'Safari',
      y: 4.18
    }, {
      name: 'Sogou Explorer',
      y: 1.64
    }, {
      name: 'Opera',
      y: 1.6
    }, {
      name: 'QQ',
      y: 1.2
    }, {
      name: 'Other',
      y: 2.61
    }]
  }]
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>

<body>
  <div id="container" style="height: 400px; width: 800px"></div>

</body>

</html>

Answer 1

您可以将自定义项目添加到导出菜单，并且在click事件中，对图表使用update方法，并添加新选项：

exporting: {
    menuItemDefinitions: {
        // Custom definition
        switchChart: {
            onclick: function() {
                var chartType = this.options.chart.type;

                this.update({
                    chart: {
                        type: chartType === 'bar' ? 'pie' : 'bar'
                    }
                })
            },
            text: 'Switch chart'
        }
    },
    buttons: {
        contextButton: {
            menuItems: ["switchChart", "separator", "printChart", "separator", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
        }
    }
},

实时演示：http://jsfiddle.net/BlackLabel/xdsgL6rm/

API：

https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems

https://api.highcharts.com/class-reference/Highcharts.Chart#update

在高图中的饼图和条形图之间切换

1 个答案: