Переключение между круговыми диаграммами и гистограммой в верхних графиках - PullRequest
Новая
       9

Переключение между круговыми диаграммами и гистограммой в верхних графиках

0 голосов
/ 04 февраля 2019

Я ищу функцию, которая позволит мне переключиться с круговой диаграммы на гистограмму (и обратно) с помощью контекстного меню, представленного старшими диаграммами.На следующем рисунке показано, где бы я хотел разместить переключатель графика.

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>

1 Ответ

0 голосов
/ 04 февраля 2019

Вы можете добавить пользовательский элемент в меню экспорта и в 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...