Слушатель выбранного элемента круговой диаграммы Google не работает - PullRequest
0 голосов
/ 29 октября 2018

Здесь я использовал «круговую диаграмму Google». Первый график выбранного элемента 'слушатель событий' используется для создания второго графика. Первая диаграмма, для которой выбран пункт «круговая метка», должна использоваться для получения данных для второй диаграммы. Поэтому я изменил свой код, как показано ниже, чтобы отобразить «круговую метку среза» в разделе «опция диаграммы» и получить это значение из функции прослушивателя событий для отображения второй диаграммы.

index.blade.php

var data = google.visualization.arrayToDataTable(chart_values);
var options = {'width':750, 'height':750, 'pieSliceText' :'label','fontSize': '12', 'chartArea' : {'width': 650, 'height': 650}, };
var chart = new google.visualization.PieChart(document.getElementById('catwiseChart'));

google.visualization.events.addListener(chart, 'select', function()
{
var catDecs = this.getSelection().focusNode.data; // used to get the code of the selected item

    getCatCode(catDecs); //pass value to draw the second chart  

});

chart.draw(data, options);

function getCatCode(catDecs)
{
    $.ajax({
            url: "{{ route('getCategoryCodeByDesc') }}", // provide correct url
            method: "GET",
            data :{catDecs:catDecs},
            dataType:"JSON",
            success: function(data)
            {
                for (var i =0; i < data.length; i++) 
                {
                    catCode = data[i].code;
                    load_chart_data1(catCode, catDecs);

                }       

            }
    });
}


function load_chart_data1(catCode, catDecs)
{      
  google.load("visualization", "0", {packages:["corechart"]});
  google.setOnLoadCallback(load_chart_data1);

    $.ajax({
        url: "{{ route('getBrandWiseSummery') }}", // provide correct url
        method: "GET",
        data :{catcode:catCode},
        dataType:"JSON",
        success: function(data){

          var data1 = google.visualization.arrayToDataTable(data);
          var options = {
                     'width':525,
                     'height':450,
                     'chartArea' : {'width': 350, 'height': 350},
                     'title': 'Category: '+ catDecs,
                  };

                  var chart = new google.visualization.PieChart(document.getElementById('brdwiseChart'));
                  chart.draw(data1, options);       

              }
          });

    load_chart_data(); // to refresh the category mix cahrt
}

Чтобы отобразить процент с меткой кругового среза, я изменил следующий код в первом параметре диаграммы, добавив 'legend:' {position: 'Labeled'} ', чтобы отобразить процент, потому что' pieSliceText ':' label-and- процент 'только отображать процент. Затем, после внесения вышеуказанных изменений, к сожалению, приемник событий диаграммы не работает должным образом.

Полный код для опции диаграммы ниже.

var options = {'width':750, 'height':750, 'pieSliceText' :'label','fontSize': '12', 'chartArea' : {'width': 650, 'height': 650}, 'legend': {position: 'labeled'}};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...