【发布时间】：2021-02-03 21:08:12
【问题描述】：
我用示例数据创建了一个小提琴，但当然它仍然不起作用
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, days, row);
});
donutChart('#divPieSubst', pieSubst);
donutChart('#divPieFeedr', pieFeedr);
};
这是我的格式化函数：
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
}
上面处理了 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), 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);
}
};
从 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 根本没有打印出来。
我做错了什么？
【问题讨论】：
-
嗨@jp2code，你能检查一下你的例子吗？我有一个错误：
ReferenceError: grid is not defined。你可能忘记了一些图书馆。 -
@ppotaczek，你是对的。如何在剑道网格中链接？实际上，看看代码是如何工作的，我没有办法用我的 SQL Server 数据填充剑道网格。相反，我试图“硬编码”一些数据并将其传递进去。不过，我不知道最好的方法。您可以安全地消除
grid项目。我承认我现在不知道如何解析数据。我得到了一个更新的版本（jsfiddle.net/jp2code/q1v4xewc/28）。我将更新问题以显示此迭代。 -
@ppotaczek，如果您在查看我的代码后发现明显更好的方法，我愿意接受建议。这似乎变得过于复杂了。
-
jp2code，感谢您提供详细信息。我在您的代码中遇到了一些问题，请检查以下示例：jsfiddle.net/BlackLabel/3ar6z09s 现在似乎可以工作了。如果您向我提供有关您要呈现哪些数据的更多详细信息，我将能够提供更多帮助。
-
这看起来太棒了！当我在我的项目中尝试它时，我得到了
GapMeters.js:185 Uncaught TypeError: dataArray.find is not a function所以代码退出了 - 但它在小提琴中工作！如何让它在我的项目/浏览器中工作？
标签： javascript jquery arrays highcharts counting