当我使用boost js时，我在浏览器上遇到了这个错误：
未捕获的TypeError：无法读取属性＆＃39;文档＆＃39;未定义的
造成这个问题的原因是什么？
当我在控制台中检查元素时，我发现此doc = win.document,中的错误，我正在使用this来获取boost.js
任何帮助都将不胜感激。
更新
我已将脚本包括在内
<script src="../../Scripts/jquery-3.1.0.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/highstock/2.1.8/highstock.js" type="text/javascript"></script>
<script src="~/Scripts/highstock/2.1.8/modules/exporting.js" type="text/javascript"></script>
<script src="~/Scripts/Highcharts/js/modules/boost.js" type="text/javascript"></script>
这是我的SVG代码：
/*
Create a global getSVG method that takes an array of charts as an argument
*/
$(window).load(
$(function () {
Highcharts.getSVG = function (charts) {
var svgArr = [],
top = 0,
width = 0;
$.each(charts, function (i, chart) {
var svg = chart.getSVG();
svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
svg = svg.replace('</svg>', '</g>');
top += chart.chartHeight;
width = Math.max(width, chart.chartWidth);
svgArr.push(svg);
});
return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};
/**
* Create a global exportCharts method that takes an array of charts as an argument,
* and exporting options as the second argument
*/
Highcharts.exportCharts = function (charts, options) {
// Merge the options
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// Post to export server
Highcharts.post(options.url, {
filename: options.filename || 'chart',
type: options.type,
width: options.width,
svg: Highcharts.getSVG(charts)
});
};
之后我设置了来自控制器的数据数组，如下所示：
var myArrayX_kwh = [];
var myArrayY_kwh = [];
var myArrayY_power = [];
var myArrayY_voltage_1 = [];
var myArrayY_voltage_2 = [];
var myArrayY_voltage_3 = [];
var myArrayY_current_1 = [];
var myArrayY_current_2 = [];
var myArrayY_current_3 = [];
var arry_kwh = [];
var arry_power = [];
var arry_voltage_1 = [];
var arry_voltage_2 = [];
var arry_voltage_3 = [];
var arry_current_1 = [];
var arry_current_2 = [];
var arry_current_3 = [];
现在我添加了一个foreach和一个for循环，将数据推送到数组
@foreach (var st in ViewData["Meter_datetime"] as List<double?>)
{
@:myArrayX_kwh.push(@st);
}
@foreach (var st in ViewData["energy_kwh"] as List<double?>)
{
@:myArrayY_kwh.push(@st);
}
@foreach (var st in ViewData["power_kw"] as List<double?>)
{
@:myArrayY_power.push(@st);
}
@foreach (var st in ViewData["voltage_1"] as List<double?>)
{
@:myArrayY_voltage_1.push(@st);
}
@foreach (var st in ViewData["voltage_2"] as List<double?>)
{
@:myArrayY_voltage_2.push(@st);
}
@foreach (var st in ViewData["voltage_3"] as List<double?>)
{
@:myArrayY_voltage_3.push(@st);
}
@foreach (var st in ViewData["current_1"] as List<double?>)
{
@:myArrayY_current_1.push(@st);
}
@foreach (var st in ViewData["current_2"] as List<double?>)
{
@:myArrayY_current_2.push(@st);
} @foreach (var st in ViewData["current_3"] as List<double?>)
{
@:myArrayY_current_3.push(@st);
}
for (var i = 0; i < myArrayX_kwh.length; i++) {
arry_kwh.push({ x: myArrayX_kwh[i], y: myArrayY_kwh[i], });
arry_power.push({ x: myArrayX_kwh[i], y: myArrayY_power[i], });
arry_voltage_1.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_1[i], });
arry_voltage_2.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_2[i], });
arry_voltage_3.push({ x: myArrayX_kwh[i], y: myArrayY_voltage_3[i], });
arry_current_1.push({ x: myArrayX_kwh[i], y: myArrayY_current_1[i], });
arry_current_2.push({ x: myArrayX_kwh[i], y: myArrayY_current_2[i], });
arry_current_3.push({ x: myArrayX_kwh[i], y: myArrayY_current_3[i], });
}
之后我按如下方式初始化了图表
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column',
zoomType: 'xy',
panning: true,
pankey:'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -250,
y: 5,
//height: 25
},
relativeTo: 'chart'
}
},
navigator: { enabled: true },
//scrollbar: {
// enabled: true,
// barBackgroundColor: 'silver',
// barBorderRadius: 7,
// barBorderWidth: 0,
// buttonBackgroundColor: 'silver',
// buttonBorderWidth: 0,
// buttonArrowColor:'yellow',
// buttonBorderRadius: 7,
// rilfeColor:'yellow',
// trackBackgroundColor: 'none',
// trackBorderWidth: 1,
// trackBorderRadius: 8,
// trackBorderColor: '#CCC'
//},
rangeSelector: {
selected: 4
},
plotOptions: {
column: {
turboThreshold: 2200
}
},
title: {
text: 'Energy vs Date & Time',
style: {
//color: '#FF00FF',
fontWeight: 'bold',
//fontSize: '12px'
//sfont: 'bold 200px Verdana, sans-serif',
}
},
xAxis: {
// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
type: 'datetime',
// max: new Date().getTime(),
//labels: {
// // format: {value:}
// style: {
// fontSize: '13px',
// fontFamily: 'Verdana, sans-serif'
// }
//}
}, yAxis: {
title: {
text: 'Energy (kWh)',
style: {
//color: '#FF00FF',
fontSize: '12px',
//sfont: 'bold 200px Verdana, sans-serif',
}
}
},
series: [{
name: 'Energy kWh',
color: 'green',
data: arry_kwh,
}]
});
我有2个折线图和2个条形图，我完成了与chart1
相同的初始化var chart2 = new Highcharts.Chart({.........});