Question

在这里，我使用了“ 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'}};

Google饼图所选项目侦听器不起作用

0 个答案: