问题描述
我用示例数据创建了一个小提琴，但当然它仍然不起作用
http://jsfiddle.net/jp2code/q1v4xewc/28/
我有远程数据进入剑道网格，我正在尝试通过浏览数据来处理摘要信息以更新 Highchart 饼图。
function onDataBound(e) {
var pieSubst = ['Meter Count per Substation (Top 10)',[],[]];
var pieFeedr = ['Meter Count per Feeders (Top 10)',[]];
$.each(grid.items(),function (index,item) {
var uid = $(item).data('uid');
var row = grid.dataSource.getByUid(uid);
var days = row.Days;
formatPieData(pieSubst,row.Substation,days,row);
formatPieData(pieFeedr,row.Feeder,row);
});
donutChart('#divPieSubst',pieSubst);
donutChart('#divPieFeedr',pieFeedr);
};
这是我的格式函数：
function formatPieData(array,countLabel,row) {
if ((countLabel == null) || (countLabel == '')) {
countLabel = '(no label)';
}
var dataArray = array[1];
if (!dataArray) { // if there is nothing at position 2,dataArray = []; // create an empty array (which should have been done in the onDataBound(e))
}
if (!dataArray[countLabel]) { // if array[label] does not exists,dataArray[countLabel] = { // create the array entry using
Name: countLabel,// the label
Days: days,// and the days
};
} else { // otherwise...
dataArray[countLabel].Days = dataArray[countLabel].Days + days; // ...add the days
}
array[2].push(row); // push the row data on the end
}
上面处理了 617 行，但我的圆环图是空的。
下面是我的 donutChart 函数，用于显示 Highcharts 图表：
function donutChart(div,array) { // donut: https://www.tutorialspoint.com/highcharts/highcharts_pie_donut.htm
var target = $(div);
if (target != null) {
var chartTitle = array[0].label;
array[1].data.sort(function (o1,o2) { return o2.days - o1.days });
console.log('donutChart(' + chartTitle + ') data:');
console.log(array[1].data);
var categories = {};
var colors = Highcharts.getoptions().colors;
var colorMax = colors.length - 1;
var top10 = [];
$.each(array[1].data.slice(0,9),item) { // only interested in 0 to 9 (top 10)
console.log('donutChart: each(array) (index) = ' + index);
console.log(item);
var name = item.Name;
if (name == null) {
name = '(no label)';
}
categories.push(name);
var entry = {
name: name,y: item.Days,color: colors[index % colorMax],// don't go over the array
drilldown: {
name: name,data: item,// don't go over the array
}
};
console.log('donutChart: each(array) data = ');
console.log(entry);
top10.push(entry);
});
var chart = {
height: '50%',renderTo: div,type: 'pie'
};
var title = {
text: chartTitle,style: {
fontSize: { size: '6px' }
}
};
var yAxis = {
title: {
text: 'Days'
}
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
borderColor: '#000000',innerSize: '70%',dataLabels: {
enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
};
var series = [{
name: chartTitle,colorByPoint: true,data: top10,size: '60%',dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},color: 'white',distance: -30
}
}];
var json = {};
json.chart = chart;
json.credits = { text: '' };
json.title = title;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
console.log('donutChart: json');
console.log(json);
$(div).highcharts(json);
}
};
从 Chrome 控制台，我可以读取数据中的调试信息。它显示我有数据，但我从未进入循环。
donutChart(Meter Count per Substation (Top 10)) data:
GapMeters.js:272 [ELECTRIC: {…},Sub 2: {…},WATER: {…},Sub 3: {…},empty: {…}]ELECTRIC: {Name: "ELECTRIC",Days: 2176}Sub 2: {Name: "Sub 2",Days: 797}Sub 3: {Name: "Sub 3",Days: 15}WATER: {Name: "WATER",Days: 243}empty: Days: 15Name: "empty"__proto__: Objectlength: 0__proto__: Array(0)
GapMeters.js:372 donutChart: json
GapMeters.js:373 {chart: {…},credits: {…},title: {…},yAxis: {…},tooltip: {…}, …}chart: {height: "50%",renderTo: "#divPieSubst",type: "pie"}credits: {text: ""}plotOptions: {pie: {…}}series: [{…}]title: {text: "Meter Count per Substation (Top 10)",style: {…}}tooltip: {pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"}yAxis: {title: {…}}__proto__: Object
GapMeters.js:271
惊讶！ Chrome 数据实际上粘贴得很好！
无论如何，我有数据，但是循环中的 console.log 根本没有打印出来。
我做错了什么？
解决方法
我有一个可以运行的版本。我试图让 JSFiddle 显示我所做的，但我无法弄清楚它的界面：
http://jsfiddle.net/jp2code/q1v4xewc/79/
<div id="divPieSubst"></div>
<div id="divPieFeedr"></div>
<div id="divPieCycle"></div>
<div id="divPieRoute"></div>
<div id="divBarDays"></div>
<div id="grid"></div>
$(function() {
$(document).ready(function() {
var e = [];
e.push({
Substation: 'ELECTRIC',Feeder: '',ServiceType: 'Electric',Account: '403310300-01',Rate: 'SCR2',Cycle: '04',Route: '4033',Customer: 'Customer 403310300-01',Address: '',Meter: '3P00325',Start: '02/04/2015',End: '01/19/2021',Days: 2176
});
e.push({
Substation: 'Sub 2',ServiceType: 'Water',Account: '102303446-05',Rate: '0',Cycle: '01',Route: '1023',Customer: 'Customer 102303446-05',Meter: '47170023',Start: '11/14/2018',Days: 797
});
e.push({
Substation: 'WATER',Account: '102001979-07',Route: '1020',Customer: 'Customer 102001979-07',Meter: '45234070',Start: '01/03/2021',Days: 16
});
e.push({
Substation: 'WATER',Account: '103602334-01',Route: '1036',Customer: 'Customer 103602334-01',Meter: '45440615',Account: '102502791-01',Rate: '6',Route: '1025',Customer: 'Customer 102502791-01',Meter: '13242857H',Account: '401112758-08',Route: '4011',Customer: 'Customer 401112758-08',Meter: '44633754',Start: '01/04/2021',Days: 15
});
e.push({
Substation: 'WATER',Account: '100601731-08',Route: '1006',Customer: 'Customer 100601731-08',Meter: '44634197',Account: '202802192-03',Cycle: '02',Route: '2028',Customer: 'Customer 202802192-03',Meter: '44633786',Account: '201900499-02',Route: '2019',Customer: 'Customer 201900499-02',Meter: '44633788',Account: '102702268-00',Rate: '2',Route: '1027',Customer: 'Customer 102702268-00',Meter: '44634247',Account: '202602889-09',Route: '2026',Customer: 'Customer 202602889-09',Meter: '44634191',Account: '102702083-02',Rate: '5',Customer: 'Customer 102702083-02',Meter: '13242805H',Account: '101606681-01',Route: '1016',Customer: 'Customer 101606681-01',Meter: '45059218',Account: '100100025-03',Route: '1001',Customer: 'Customer 100100025-03',Meter: '45233976',Account: '101900421-08',Route: '1019',Customer: 'Customer 101900421-08',Meter: '45234013',Days: 15
});
e.push({
Substation: 'Sub 3',ServiceType: 'Gas',Meter: 'G34013',Account: '102002727-01',Customer: 'Customer 102002727-01',Meter: '12732616H',Days: 15
});
e.push({
Substation: '',ServiceType: '',Account: '102202513-00',Rate: '2S',Route: '1022',Customer: 'Customer 102202513-00',Meter: '44634246',Account: '301513750-00',Cycle: '03',Route: '3015',Customer: 'Customer 301513750-00',Meter: '45234068',Account: '300911973-01',Route: '3009',Customer: 'Customer 300911973-01',Meter: '45234017',Days: 15
});
onDataBound(e);
});
function onDataBound(e) {
$('#grid').kendoGrid({
dataSource: {
data: e
},});
var pieSubst = [{
label: 'Meter Count per Substation (Top 10)',data: [],rows: []
}];
var pieFeedr = [{
label: 'Meter Count per Feeders (Top 10)',rows: []
}];
var pieCycle = [{
label: 'Meter Count per Cycle (Top 10)',rows: []
}];
var pieRates = [{
label: 'Meter Count per Rate (Top 10)',rows: []
}];
var grid = $('#grid').data('kendoGrid');
$.each(e,function(index,item) {
formatPieData(pieSubst,item.Substation,item);
formatPieData(pieFeedr,item.Feeder,item);
formatPieData(pieCycle,item.Cycle,item);
formatPieData(pieRates,item.Rate,item);
});
donutChart('#divPieSubst',pieSubst);
donutChart('#divPieFeedr',pieFeedr);
pieChart('#divPieCycle',pieCycle);
pieChart('#divPieRates',pieRates);
barChart('#divBarDays',barData);
}
function formatPieData(array,countLabel,item) {
if ((countLabel == null) || (countLabel == '')) {
countLabel = '(no label)';
}
let dataArray = array[1];
if (dataArray.data === undefined) { // if there is nothing at position 2,dataArray.data = []; // create an empty array (which should have been done in the .ready())
}
var data = dataArray.data.find(o => o.Name === countLabel);
if (data === undefined) { // if array[label] does not exists,data = { // create the array entry using
Name: countLabel,// the label
Count: 1,// and the days
};
dataArray.data.push(data);
} else { // otherwise...
data.Count = data.Count + 1; // ...add the days
}
array[2].rows.push(item); // push the row data on the end
}
function barChart(div,array) { // https://www.tutorialspoint.com/highcharts/highcharts_bar_basic.htm
var target = $(div);
if (target != null) {
var names = [];
var data1 = [];
for (var n = array.length - 1; - 1 < n; n--) {
names.push(array[n].label);
data1.push(array[n].days);
}
var series = [{
data: data1,showInLegend: false,}];
var json = {
chart: {
type: 'bar'
},credits: {
text: ''
},plotOptions: {
bar: {
dataLabels: {
enabled: true
},minPointLength: 5,}
},series: series,title: {
text: 'Meter Count per Gap Tier (in Days)',style: {
fontSize: {
size: '8px'
}
},},tooltip: {
valueSuffix: ' days'
},xAxis: {
categories: names,labels: {
enabled: true
},min: 0,title: {
text: null
}
},yAxix: {
min: 0,labels: {
enabled: false
},};
$(div).highcharts(json);
}
}
function donutChart(div,array) { // donut: https://www.tutorialspoint.com/highcharts/highcharts_pie_donut.htm
var target = $(div);
if (target != null) {
var chartTitle = array[0].label;
array[1].data.sort(function(o1,o2) {
return o2.Count - o1.Count
});
var categories = [];
var colors = Highcharts.getOptions().colors;
var colorMax = colors.length - 1;
var total = 0;
$.each(array[1].data,item) { // get count first
total = total + item.Count;
});
var top10 = [];
$.each(array[1].data.slice(0,9),item) { // only interested in 0 to 9 (top 10)
var name = item.Name;
if (name == null) {
name = '(no label)';
}
categories.push(name);
var nColor = index % colorMax; // don't go over the array
var percent = (item.Count / total) * 100;
var entry = {
name: name,y: percent,color: colors[nColor],drilldown: {
name: name,data: item,}
};
top10.push(entry);
});
var json = {
chart: {
height: percent,renderTo: div,type: 'pie'
},plotOptions: {
pie: {
borderColor: '#000000',innerSize: '40%',dataLabels: {
enabled: true,format: '{point.name}',}
}
},series: [{
name: categories,colorByPoint: true,data: top10,dataLabels: {
format: '{point.name}',color: 'white',distance: -30
},innerSize: '50%',size: '100%',}],title: {
text: chartTitle,style: {
fontSize: {
size: '6px'
}
}
},tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},xAxis: {
categories: categories,yAxis: {
min: 0,title: {
text: 'Count'
}
},};
$(div).highcharts(json);
}
}
function pieChart(div,array) { // basic pie: https://www.tutorialspoint.com/highcharts/highcharts_pie_basic.htm
var target = $(div);
if (target != null) {
var chartTitle = array[0].label;
array[1].data.sort(function(o1,item) { // only interested in 0 to 9 (top 10)
if (item !== undefined) {
var name = item.Name;
if (name == null) {
name = '(no label)';
}
categories.push(name);
var nColor = index % colorMax; // don't go over the array
var percent = (item.Count / total) * 100;
var entry = {
name: name,drilldown: {
name: name,}
};
top10.push(entry);
}
});
var json = {
chart: {
height: '50%',plotOptions: {
pie: {
allowPointSelect: true,borderColor: '#000000',cursor: 'pointer',// format: '<b>{point.name}</b>: {point.percentage:.1f} %',formatter: function() {
return 1 < this.y ? '' + this.point.name + ': ' + Highcharts.numberFormat(this.y,1) + '%' : null;
},style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},dataLabels: {
formatter: function() {
return 1 < this.y ? this.point.name : null;
},}
console.log('pieChart: json');
console.log(json);
$(div).highcharts(json);
}
}
});
现在似乎没有任何错误（或者我似乎无法让控制台显示）。当控制台显示错误时，指示的行号似乎与代码中的行号不匹配，因此出现了问题。
我希望这对某人有用。我真的没有看到任何关于如何在将数据发送到 Highcharts 之前对其进行过滤的体面示例，也没有使用单个数据集填充多个 Highchart 图的示例。