Здесь я использовал «круговую диаграмму 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'}};
Задача ещё не решена.
Других решений пока нет …