Отключить щелчок элемента легенды на старшей диаграмме, определенной как JSON - PullRequest
0 голосов
/ 14 мая 2018

Мне нужно отключить возможность щелкать элементы в легенде в HighChart.Обычно я бы использовал следующее для точки или серии в зависимости от ситуации:

events: {
  legendItemClick: function() {
    return false;
}

Однако страница, на которой я работаю, требует, чтобы вся HighChart была определена в объекте JSON, дляпример:

{
  "chart": { "type":"column"},
  "xAxis": { "categories":[a, b, c, d] },
  "series": [{
    "name": "name",
    "data": [0,1,2,3]
  }]
}

Очевидно, что я не могу поместить функцию в JSON, поэтому я изо всех сил пытаюсь найти способ отключить legendItemClick.

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

Я бы приветствовал любые предложения.

РЕДАКТИРОВАТЬ: Добавлена ​​некоторая ясность, почему я не могу использовать функцию.

1 Ответ

0 голосов
/ 14 мая 2018

Используя данные json, обновите данные своей серии как

data: [{
      name: 'Microsoft Internet Explorer',
      y: 56.33,
      legendActive:true, //attribute for legend, true means click will work 
    }, {
      name: 'Chrome',
      y: 24.03,
      sliced: true,
      selected: true,
      legendActive:false,
    }, {
      name: 'Firefox',
      y: 10.38,
      legendActive:false,
    }, {
      name: 'Safari',
      y: 4.77,
      legendActive:false,
    }, {
      name: 'Opera',
      y: 0.91,
      legendActive:false,
    }, {
      name: 'Proprietary or Undetectable',
      y: 0.2,
      legendActive:false,
    }]

Используйте функцию для легенды: нажмите

 point: {
        events: {
          legendItemClick: function() {
            return this.legendActive;  //this is property from series data
          }
        }
   }

$(document).ready(function() {

  // Build the chart
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: 'Browser market shares January, 2015 to May, 2015'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: false
        },
        showInLegend: true,
        point: {
          events: {
            legendItemClick: function() {
              return this.legendActive;
            }
          }
        }
      }
    },
    series: [{
      name: 'Brands',
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        legendActive: true,
      }, {
        name: 'Chrome',
        y: 24.03,
        sliced: true,
        selected: true,
        legendActive: false,
      }, {
        name: 'Firefox',
        y: 10.38,
        legendActive: false,
      }, {
        name: 'Safari',
        y: 4.77,
        legendActive: false,
      }, {
        name: 'Opera',
        y: 0.91,
        legendActive: false,
      }, {
        name: 'Proprietary or Undetectable',
        y: 0.2,
        legendActive: false,
      }]
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...