在剑道网格数据绑定事件上填充Highchart饼图 [英] filling Highchart pie graph on kendo grid databound event
本文介绍了在剑道网格数据绑定事件上填充Highchart饼图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用示例数据创建了一个小提琴，但是当然它仍然不起作用
http://jsfiddle.net/jp2code/q1v4xewc/28/
我有一个远程数据输入到剑道网格中，我正在尝试通过处理数据来更新摘要图表来处理摘要信息.
函数onDataBound(e){var pieSubst = ['每个变电站的仪表计数(前10名)'，[]，[]];var pieFeedr = ['每个进纸器的米数(前10名)'，[]，[]];$ .each(grid.items()，函数(索引，项目){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，days，row);});donutChart('#divPieSubst'，pieSubst);donutChart('#divPieFeedr'，pieFeedr);}; 这是我的格式化功能:
函数formatPieData(array，countLabel，days，row){if(((countLabel == null)||((countLabel =='')){countLabel ='(无标签)';}var dataArray = array [1];if(！dataArray){//如果位置2没有任何内容，dataArray = [];//创建一个空数组(应该在onDataBound(e)中完成)}if(！dataArray [countLabel]){//如果array [label]不存在，dataArray [countLabel] = {//使用名称:countLabel，//标签天:天，//和天};} else {//否则...dataArray [countLabel] .Days = dataArray [countLabel] .Days + days;//...加上日子}array [2] .push(row);//将行数据推到最后} 上面处理了617行，但我的甜甜圈图为空.
下面是我的 donutChart 函数，用于显示Highcharts图:
function donutChart(div，array){//甜甜圈:https://www.tutorialspoint.com/highcharts/highcharts_pie_donut.htmvar 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)，function(index，item){//仅对0到9感兴趣(前10名)console.log('donutChart:each(array)(index)='+ index);console.log(item);var name = item.Name;如果(name == null){名称='(无标签)';}Categories.push(name);var entry = {名称:名称，y:item.Days，color:colors [index％colorMax]，//不要遍历数组向下钻取:{名称:名称，数据项，color:colors [index％colorMax]，//不要遍历数组}};console.log('donutChart:each(array)data =');console.log(entry);top10.push(entry);});var chart = {高度:"50％"，renderTo:div，类型:派"};var title = {文字:chartTitle，风格: {fontSize:{大小:'6px'}}};var yAxis = {标题: {文字:天数"}};var tooltip = {pointFormat:'{series.name}:< b> {point.percentage:.1f}％</b>'};var plotOptions = {馅饼:{borderColor:'#000000'，innerSize:'70％'，dataLabels:{已启用:true，格式:< b> {point.name}</b>:{point.percentage:.1f}％'，风格: {颜色:(Highcharts.theme&& Highcharts.theme.contrastTextColor)||'黑色的'}}}};var series = [{名称:chartTitle，colorByPoint:是的，数据:top10，大小:"60％"，dataLabels:{格式化程序:function(){返回this.y>5?this.point.name:null;}，白颜色'，距离:-30}}];var json = {};json.chart = chart;json.credits = {文本:''};json.title =标题;json.yAxis = yAxis;json.tooltip =工具提示;json.series =系列;json.plotOptions = plotOptions;console.log('donutChart:json');console.log(json);$(div).highcharts(json);}}; 我可以从Chrome控制台读取数据中包含的调试信息.它显示我有数据，但我从未进入循环.
donutChart(每个变电站的计数器计数(前10名))数据:GapMeters.js:272 [电子:{…}，子2:{…}，水:{…}，子3:{…}，空:{…}]电子:{名称:电子"，天:2176} Sub 2:{名称:"Sub 2"，天:797} Sub 3:{名称:"Sub 3"，天:15} WATER:{Name:"WATER"，天:243}空:天数:15名称:空" __proto__:对象长度:0__proto __:Array(0)GapMeters.js:372 donutChart:jsonGapMeters.js:373 {图表:{…}，信用:{…}，标题:{…}，yAxis:{…}，工具提示:{…}，…}图表:{高度:"50％"，renderTo:#divPieSubst"，键入:"pie"}信用:{text:""} plotOptions:{pie:{…}}系列:[{…}]标题:{text:米数"每个变电站(前10名)"，样式:{…}}工具提示:{pointFormat:"{series.name}:< b> {point.percentage:.1f}％</b>"} yAxis:{title:{…}} __ proto__:对象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({变电站:电子"，进纸器:，服务类型:电动"，帐户:"403310300-01"，评分:"SCR2"，周期:"04"，路线:"4033"，客户:客户403310300-01"，地址: ''，仪表:'3P00325'，开始:"02/04/2015"，结束:"01/19/2021"，天数:2176});e.push({变电站:"Sub 2"，进纸器:，服务类型:水"，帐户:"102303446-05"，评分:"0"，周期:"01"，路线:"1023"，客户:客户102303446-05"，地址: ''，计量表:"47170023"，开始:'11/14/2018'，结束:"01/19/2021"，几天:797});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"102001979-07"，评分:"0"，周期:"01"，路线:"1020"，客户:客户102001979-07"，地址: ''，计量表:"45234070"，开始:"01/03/2021"，结束:"01/19/2021"，天数:16});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"103602334-01"，评分:"0"，周期:"01"，路线:"1036"，客户:客户103602334-01"，地址: ''，计量表:"45440615"，开始:"01/03/2021"，结束:"01/19/2021"，天数:16});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"102502791-01"，评分:"6"，周期:"01"，路线:"1025"，客户:客户102502791-01"，地址: ''，仪表:'13242857H'，开始:"01/03/2021"，结束:"01/19/2021"，天数:16});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"401112758-08"，评分:"0"，周期:"04"，路线:"4011"，客户:客户401112758-08"，地址: ''，计量表:"44633754"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"100601731-08"，评分:"0"，周期:"01"，路线:"1006"，客户:客户100601731-08"，地址: ''，仪表:"44634197"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"202802192-03"，评分:"0"，周期:"02"，路线:"2028"，客户:客户202802192-03"，地址: ''，计量表:"44633786"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:'201900499-02'，评分:"0"，周期:"02"，路线:"2019"，客户:"Customer 201900499-02"，地址: ''，计量表:"44633788"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"102702268-00"，评分:"2"，周期:"01"，路线:"1027"，客户:客户102702268-00"，地址: ''，计量表:"44634247"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"202602889-09"，评分:"0"，周期:"02"，路线:"2026"，客户:客户202602889-09"，地址: ''，计量表:"44634191"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"102702083-02"，评分:"5"，周期:"01"，路线:"1027"，客户:客户102702083-02"，地址: ''，仪表:'13242805H'，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"101606681-01"，评分:"5"，周期:"01"，路线:"1016"，客户:客户101606681-01"，地址: ''，计量表:"45059218"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"100100025-03"，评分:"0"，周期:"01"，路线:"1001"，客户:"Customer 100100025-03"，地址: ''，仪表:"45233976"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"101900421-08"，评分:"0"，周期:"01"，路线:"1019"，客户:客户101900421-08"，地址: ''，计量表:"45234013"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"Sub 3"，进纸器:，服务类型:气体"，帐户:"101900421-08"，评分:"0"，周期:"01"，路线:"1019"，客户:客户101900421-08"，地址: ''，仪表:'G34013'，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"102002727-01"，评分:"6"，周期:"01"，路线:"1020"，客户:客户102002727-01"，地址: ''，仪表:'12732616H'，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:，进纸器:，服务类型: ''，帐户:"102202513-00"，评分:"2S"，周期:"01"，路线:"1022"，客户:客户102202513-00"，地址: ''，计量表:"44634246"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"301513750-00"，评分:"0"，循环:"03"，路线:"3015"，客户:"Customer 301513750-00"，地址: ''，仪表:"45234068"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});e.push({变电站:"WATER"，进纸器:，服务类型:水"，帐户:"300911973-01"，评分:"0"，循环:"03"，路线:"3009"，客户:客户300911973-01"，地址: ''，计量表:"45234017"，开始:"01/04/2021"，结束:"01/19/2021"，天数:15});onDataBound(e);});函数onDataBound(e){$('#grid').kendoGrid({数据源: {数据:e}，});var pieSubst = [{标签:每个变电站的仪表计数(前10名)"，数据: []，行:[]}];var pieFeedr = [{标签:每个进纸器的米数(前10位)"，数据: []，行:[]}];var pieCycle = [{标签:每个周期的米计数(前10位)"，数据: []，行:[]}];var pieRates = [{标签:每个费率的计数器计数(前10名)"，数据: []，行:[]}];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);}函数formatPieData(array，countLabel，item){if(((countLabel == null)||((countLabel =='')){countLabel ='(无标签)';}让dataArray = array [1];if(dataArray.data === undefined){//如果位置2处没有任何内容，dataArray.data = [];//创建一个空数组(应该在.ready()中完成)}var data = dataArray.data.find(o => o.Name === countLabel);if(data === undefined){//如果array [label]不存在，data = {//使用以下命令创建数组条目名称:countLabel，//标签计数:1，//和天数};dataArray.data.push(data);} else {//否则...data.Count = data.Count +1;//...加上日子}array [2] .rows.push(item);//将行数据推到最后}函数barChart(div，array){//https://www.tutorialspoint.com/highcharts/highcharts_bar_basic.htmvar target = $(div);if(target！= null){var名称= [];var data1 = [];for(var n = array.length-1;-1 现在似乎没有任何错误(或者我似乎无法显示控制台).当控制台正在显示错误时，指示的行号似乎与代码中的行号不匹配，因此出现了混乱.
我希望这对某人有用.我真的没有看到任何有关如何在将数据发送到Highcharts之前对数据进行过滤的体面示例，也没有使用单个数据集填充多个Highchart图的示例.
I created a fiddle with sample data, but of course it still does not work
http://jsfiddle.net/jp2code/q1v4xewc/28/
I have remote data coming in to a kendo grid, and I am trying to process summary information by going through the data for updating a Highchart pie graph.
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, days, row);
});
donutChart('#divPieSubst', pieSubst);
donutChart('#divPieFeedr', pieFeedr);
};
Here is my Format function:
function formatPieData(array, countLabel, days, 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
}
There are 617 rows that get processed above, but my donut chart is empty.
Below is my donutChart function to display the Highcharts graph:
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), function (index, 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,
color: colors[index % colorMax], // 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);
}
};
From the Chrome Console, I can read the debug information that I have in the data. It shows I have data, but I never enter the loop.
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
Surprised! The Chrome data actually pastes in nicely!
Anyway, I have data, but the console.log from the loop isn't printing out at all.
What am I doing wrong?
解决方案
I have a version that runs. I'm trying to get JSFiddle to show what I did, but I can't figure out it's interface:
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',
Feeder: '',
ServiceType: 'Water',
Account: '102303446-05',
Rate: '0',
Cycle: '01',
Route: '1023',
Customer: 'Customer 102303446-05',
Address: '',
Meter: '47170023',
Start: '11/14/2018',
End: '01/19/2021',
Days: 797
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102001979-07',
Rate: '0',
Cycle: '01',
Route: '1020',
Customer: 'Customer 102001979-07',
Address: '',
Meter: '45234070',
Start: '01/03/2021',
End: '01/19/2021',
Days: 16
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '103602334-01',
Rate: '0',
Cycle: '01',
Route: '1036',
Customer: 'Customer 103602334-01',
Address: '',
Meter: '45440615',
Start: '01/03/2021',
End: '01/19/2021',
Days: 16
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102502791-01',
Rate: '6',
Cycle: '01',
Route: '1025',
Customer: 'Customer 102502791-01',
Address: '',
Meter: '13242857H',
Start: '01/03/2021',
End: '01/19/2021',
Days: 16
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '401112758-08',
Rate: '0',
Cycle: '04',
Route: '4011',
Customer: 'Customer 401112758-08',
Address: '',
Meter: '44633754',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '100601731-08',
Rate: '0',
Cycle: '01',
Route: '1006',
Customer: 'Customer 100601731-08',
Address: '',
Meter: '44634197',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '202802192-03',
Rate: '0',
Cycle: '02',
Route: '2028',
Customer: 'Customer 202802192-03',
Address: '',
Meter: '44633786',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '201900499-02',
Rate: '0',
Cycle: '02',
Route: '2019',
Customer: 'Customer 201900499-02',
Address: '',
Meter: '44633788',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102702268-00',
Rate: '2',
Cycle: '01',
Route: '1027',
Customer: 'Customer 102702268-00',
Address: '',
Meter: '44634247',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '202602889-09',
Rate: '0',
Cycle: '02',
Route: '2026',
Customer: 'Customer 202602889-09',
Address: '',
Meter: '44634191',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102702083-02',
Rate: '5',
Cycle: '01',
Route: '1027',
Customer: 'Customer 102702083-02',
Address: '',
Meter: '13242805H',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '101606681-01',
Rate: '5',
Cycle: '01',
Route: '1016',
Customer: 'Customer 101606681-01',
Address: '',
Meter: '45059218',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '100100025-03',
Rate: '0',
Cycle: '01',
Route: '1001',
Customer: 'Customer 100100025-03',
Address: '',
Meter: '45233976',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '101900421-08',
Rate: '0',
Cycle: '01',
Route: '1019',
Customer: 'Customer 101900421-08',
Address: '',
Meter: '45234013',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'Sub 3',
Feeder: '',
ServiceType: 'Gas',
Account: '101900421-08',
Rate: '0',
Cycle: '01',
Route: '1019',
Customer: 'Customer 101900421-08',
Address: '',
Meter: 'G34013',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '102002727-01',
Rate: '6',
Cycle: '01',
Route: '1020',
Customer: 'Customer 102002727-01',
Address: '',
Meter: '12732616H',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: '',
Feeder: '',
ServiceType: '',
Account: '102202513-00',
Rate: '2S',
Cycle: '01',
Route: '1022',
Customer: 'Customer 102202513-00',
Address: '',
Meter: '44634246',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '301513750-00',
Rate: '0',
Cycle: '03',
Route: '3015',
Customer: 'Customer 301513750-00',
Address: '',
Meter: '45234068',
Start: '01/04/2021',
End: '01/19/2021',
Days: 15
});
e.push({
Substation: 'WATER',
Feeder: '',
ServiceType: 'Water',
Account: '300911973-01',
Rate: '0',
Cycle: '03',
Route: '3009',
Customer: 'Customer 300911973-01',
Address: '',
Meter: '45234017',
Start: '01/04/2021',
End: '01/19/2021',
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)',
data: [],
rows: []
}];
var pieCycle = [{
label: 'Meter Count per Cycle (Top 10)',
data: [],
rows: []
}];
var pieRates = [{
label: 'Meter Count per Rate (Top 10)',
data: [],
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, function(index, item) { // get count first
total = total + item.Count;
});
var top10 = [];
$.each(array[1].data.slice(0, 9), function(index, 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,
color: colors[nColor],
}
};
top10.push(entry);
});
var json = {
chart: {
height: percent,
renderTo: div,
type: 'pie'
},
credits: {
text: ''
},
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,
labels: {
enabled: true
},
min: 0,
title: {
text: null
}
},
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, 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, function(index, item) { // get count first
total = total + item.Count;
});
var top10 = [];
$.each(array[1].data.slice(0, 9), function(index, 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,
y: percent,
color: colors[nColor],
drilldown: {
name: name,
data: item,
color: colors[nColor],
}
};
top10.push(entry);
}
});
var json = {
chart: {
height: '50%',
renderTo: div,
type: 'pie'
},
credits: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
borderColor: '#000000',
cursor: 'pointer',
dataLabels: {
enabled: true,
// 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'
}
}
}
},
series: [{
name: categories,
colorByPoint: true,
data: top10,
dataLabels: {
formatter: function() {
return 1 < this.y ? this.point.name : null;
},
color: 'white',
distance: -30
},
size: '100%',
}],
title: {
text: chartTitle,
style: {
fontSize: {
size: '6px'
}
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
xAxis: {
categories: categories,
labels: {
enabled: true
},
min: 0,
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
}
console.log('pieChart: json');
console.log(json);
$(div).highcharts(json);
}
}
});
There don't seem to be any errors now (or I can't seem to get the Console to show). When the Console was showing errors, the line numbers indicated did not seem to match up with the line numbers in the code, so something was messed up.
I hope this is useful to someone. I really didn't see any decent examples of how to filter through the data before sending it to Highcharts, and NO EXAMPLES of using a single dataset to fill more than one Highchart graph.
这篇关于在剑道网格数据绑定事件上填充Highchart饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
