Jqplot - 无法读取未定义的 属性 'startAngle'
Jqplot - Cannot read property 'startAngle' of undefined
我正在尝试通过 jqPlot 插件在 Laravel.Jqplot 中显示一个饼图,脚本被编译成 app.js 主文件并与 laravel 混合。
我遇到的错误:
jQuery.Deferred exception:
Cannot read property 'startAngle' of
undefined TypeError: Cannot read property 'startAngle' of undefined
(at doDraw)
doDraw函数(来自app.js):
function doDraw(rad) {
// Fix for IE and Chrome that can't seem to draw circles correctly.
// ang2 should always be <= 2 pi since that is the way the data is converted.
// 2Pi = 6.2831853, Pi = 3.1415927
if (ang2 > 6.282 + this.startAngle) { **it fails on this if statement**
ang2 = 6.282 + this.startAngle;
if (ang1 > ang2) {
ang1 = 6.281 + this.startAngle;
}
}
// Fix for IE, where it can't seem to handle 0 degree angles. Also avoids
// ugly line on unfilled pies.
if (ang1 >= ang2) {
return;
}
ctx.beginPath();
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.arc(0, 0, rad, ang1, ang2, false);
ctx.lineTo(0, 0);
ctx.closePath();
if (fill) {
ctx.fill();
} else {
ctx.stroke();
}
}
饼图代码:
<div id="pie_seminar{{ $seminar->id }}" class="piechart"></div>
<script>
var id, plot;
$(document).ready(function () {
id = '{{ $seminar->id }}';
var plot{{ $seminar->id }} = $.jqplot('pie_seminar' + id, [[['Attempted',{{ $statisticResult['incomplete'] }}], ['Completed',{{ $statisticResult['completed'] }}]]], {
gridPadding: {top: 1, right: 1, bottom: 1, left: 1},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#ffffff',
shadow: false
},
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
sliceMargin: 3,
// rotate the starting position of the pie around to 12 o'clock.
startAngle: -90,
showDataLabels: true,
diameter: null,
padding: 8,
margin: 1
},
trendline: {show: false}
},
legend: {
show: false,
},
highlighter: {
tooltipContentEditor: function (str, seriesIndex, pointIndex) {
return str;
},
show: false,
useAxesFormatters: false,
tooltipFormatString: '%s'
},
seriesColors: ["#cccccc", "#aaccff", "#F5811F"]
});
});
</script>
我设法通过手动将脚本导入 public 文件夹来显示饼图插件(这不是解决方案,因为所有脚本都需要编译到一个文件中),所以这表明代码应该没关系。
使用 laravel mix 重新编译资产没有解决问题。代码一直落在 startAngle 未定义错误处。我对 jqplot 失去了理智。 这里有什么问题?
由于 app.js 中的编译脚本落在 doDraw 函数(startAngle 变量不可访问),修改 doDraw 函数就可以了。 startAngle变量已在doDraw[=24]中全局声明 =] function,并且在 blade 模板中也作为 startAngle,以便每个生成的 jqPlot 饼图 全局访问 变量。当然,通过 npm 运行 dev/production.
编译资产后
我正在尝试通过 jqPlot 插件在 Laravel.Jqplot 中显示一个饼图,脚本被编译成 app.js 主文件并与 laravel 混合。
我遇到的错误:
jQuery.Deferred exception:
Cannot read property 'startAngle' of undefined TypeError: Cannot read property 'startAngle' of undefined (at doDraw)
doDraw函数(来自app.js):
function doDraw(rad) {
// Fix for IE and Chrome that can't seem to draw circles correctly.
// ang2 should always be <= 2 pi since that is the way the data is converted.
// 2Pi = 6.2831853, Pi = 3.1415927
if (ang2 > 6.282 + this.startAngle) { **it fails on this if statement**
ang2 = 6.282 + this.startAngle;
if (ang1 > ang2) {
ang1 = 6.281 + this.startAngle;
}
}
// Fix for IE, where it can't seem to handle 0 degree angles. Also avoids
// ugly line on unfilled pies.
if (ang1 >= ang2) {
return;
}
ctx.beginPath();
ctx.fillStyle = color;
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.arc(0, 0, rad, ang1, ang2, false);
ctx.lineTo(0, 0);
ctx.closePath();
if (fill) {
ctx.fill();
} else {
ctx.stroke();
}
}
饼图代码:
<div id="pie_seminar{{ $seminar->id }}" class="piechart"></div>
<script>
var id, plot;
$(document).ready(function () {
id = '{{ $seminar->id }}';
var plot{{ $seminar->id }} = $.jqplot('pie_seminar' + id, [[['Attempted',{{ $statisticResult['incomplete'] }}], ['Completed',{{ $statisticResult['completed'] }}]]], {
gridPadding: {top: 1, right: 1, bottom: 1, left: 1},
grid: {
drawBorder: false,
drawGridlines: false,
background: '#ffffff',
shadow: false
},
seriesDefaults: {
renderer: $.jqplot.PieRenderer,
rendererOptions: {
sliceMargin: 3,
// rotate the starting position of the pie around to 12 o'clock.
startAngle: -90,
showDataLabels: true,
diameter: null,
padding: 8,
margin: 1
},
trendline: {show: false}
},
legend: {
show: false,
},
highlighter: {
tooltipContentEditor: function (str, seriesIndex, pointIndex) {
return str;
},
show: false,
useAxesFormatters: false,
tooltipFormatString: '%s'
},
seriesColors: ["#cccccc", "#aaccff", "#F5811F"]
});
});
</script>
我设法通过手动将脚本导入 public 文件夹来显示饼图插件(这不是解决方案,因为所有脚本都需要编译到一个文件中),所以这表明代码应该没关系。
使用 laravel mix 重新编译资产没有解决问题。代码一直落在 startAngle 未定义错误处。我对 jqplot 失去了理智。 这里有什么问题?
由于 app.js 中的编译脚本落在 doDraw 函数(startAngle 变量不可访问),修改 doDraw 函数就可以了。 startAngle变量已在doDraw[=24]中全局声明 =] function,并且在 blade 模板中也作为 startAngle,以便每个生成的 jqPlot 饼图 全局访问 变量。当然,通过 npm 运行 dev/production.
编译资产后