我正在使用highcharts以嘗試以季度間隔構建散點圖。highcharts javascript變量
這裏是我的代碼:
laboreff = '';
if ($.isArray(dataItem.content)) {
for (var i = 0, max = dataItem.content.length; i < max; i += 1) {
laboreff += '{"x:Date.UTC('+'"'+dataItem.content[i].FiscalYear + '" ' + ', ' + '"' + dataItem.content[i].FiscalQuarter + '"'+'),"y":' + '"'+ dataItem.content[i].AverageLaborEfficiencyRatiobySICCode + '"'+'},';
}
}
var laboreff = laboreff;
var jannes = '[Date.UTC(2007,0,1),72634],[Date.UTC(2007,3,1),72634],[Date.UTC(2007,6,1),72634],[Date.UTC(2007,9,1),72634]';
//var jannes = JSON.parse("[" + jannes + "]")
// var laboreff = $.parseJSON(laboreff);
//console.log(laboreff);
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
}
);
var chartMain;
chartMain = new Highcharts.Chart({
chart: {
type: 'line',
renderTo: 'container2',
alignTicks: true,
borderWidth: 0,
resetZoomButton: {
position: {
align: 'right',
verticalAlign: 'top'
}
}
,
shadow: true,
spacingTop: 10,
spacingRight: 20,
spacingBottom: 50,
spacingLeft: 20,
zoomType: 'x'
}
,
credits: {
enabled: false
}
,
legend: {
align: 'center',
enabled: true,
itemStyle: {
fontSize: '9px',
width: '175px'
}
,
layout: 'horizontal',
verticalAlign: 'bottom'
}
,
plotOptions: {
series: {
shadow: true
}
,
spline: {
marker: {
enabled: false
}
}
}
,
subtitle: {
align: 'center',
text: 'Average Labor Efficiency Ratio by SIC code',
style: {
fontSize: '9px',
width: '100%'
}
,
verticalAlign: 'bottom'
}
,
title: {
text: ''
}
,
tooltip: {
formatter: function() {
var s = '<b>';
if (Highcharts.dateFormat('%b', this.x) == 'Jan') {
s = s + "Q1"
};
if (Highcharts.dateFormat('%b', this.x) == 'Apr') {
s = s + "Q2"
};
if (Highcharts.dateFormat('%b', this.x) == 'Jul') {
s = s + "Q3"
};
if (Highcharts.dateFormat('%b', this.x) == 'Oct') {
s = s + "Q4"
};
s = s + " " + Highcharts.dateFormat('%Y', this.x) + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>' + point.series.name + ': ';
if (point.series.name == 'Unemployment Rate (%)') {
s += Highcharts.numberFormat(point.y, 2, '.');
}
else {
s += Highcharts.numberFormat(point.y, 0, ',');
}
}
);
return s;
}
,
shared: true
}
,
xAxis: {
ordinal:false,
alternateGridColor: '#FAFAFA',
labels: {
style: {
fontSize: '9px',
width: '175px'
}
,
formatter: function() {
var s = "";
if (Highcharts.dateFormat('%b', this.value) == 'Jan') {
s = s + "Q1"
};
if (Highcharts.dateFormat('%b', this.value) == 'Apr') {
s = s + "Q2"
};
if (Highcharts.dateFormat('%b', this.value) == 'Jul') {
s = s + "Q3"
};
if (Highcharts.dateFormat('%b', this.value) == 'Oct') {
s = s + "Q4"
};
s = s + " " + Highcharts.dateFormat('%Y', this.value);
return s;
}
}
,
tickInterval: 3 * 30 * 24 * 3600 * 1000,
type: 'datetime'
}
,
yAxis: [{
endOnTick: true,
gridLineWidth: 1,
gridLineColor: '#BCCBA0',
labels: {
style: {
color: '#89A54E',
fontSize: '9px',
width: '175px'
}
}
,
opposite: false,
title: {
text: ''
}
}
],
exporting: {
buttons: {
exportButton: {
align: 'right',
verticalAlign: 'bottom',
y: -5
}
,
printButton: {
symbol: 'url(/vos_v14_predev/vosnet/Handlers/Content/Images/Image.ashx?DotImage/Icons/Print_24.png)',
align: 'right',
height: 20,
symbolSize: 22,
symbolX: 12,
symbolY: 7.5,
verticalAlign: 'bottom',
width: 24,
y: -5
}
}
,
width: 565
}
,
navigation: {
buttonOptions: {
enabled: false
}
}
,
series: [{
data: [ [Date.UTC(2007,0,1),72634],[Date.UTC(2007,3,1),72634],[Date.UTC(2007,6,1),72634],[Date.UTC(2007,9,1),72634] ],
// data: [ laboreff or jannes variable], THIS DOES NOT WORK.
name: 'Fisheries',
type: 'scatter',
yAxis: 0
}
]
}
);
alert(laboreff);
console.log(jannes);
}
}
}
);
}
);
</script>
變量laboreff得到正確的內容,當我粘貼控制檯的價值的把它加載一系列數據,我已經試過Json.parse但因爲它不是有效的JSON不工作。任何想法爲什麼圖不加載變量?
如果我從控制檯中將變量jannes和laboreff的值複製粘貼到數據中,它就可以工作。
你能不能給我們的jsfiddle? – Alexandre
我會,但是進來的json字符串是在應用程序中動態生成的。 –
Infowys.com/scott這裏是,如果您使用網絡insecptor並查看被加載的json.php,則json數據位於那裏。 –