-1
我無法在jsfiddle.I中運行此代碼無法找出問題出在哪裏。我是否需要更改html部分。如果那是什麼東西？任何人都可以幫助我解決這個問題我真的很困難這裏我不明白是什麼問題。爲什麼我無法在JsFiddle中運行此代碼？是否需要更改html代碼？
jQuery(document).ready(function($) {
//second chart
var secondLeg1 = [],
secondLeg2 = [],
secondSpread = [],
secondProfit = [];
var secondChart = null,
secondChartOptions = {
chart: {
renderTo: 'secondChartContainer',
height: 600
},
rangeSelector: {
selected: 1
},
title: {
text: 'Natural Gas'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Long'
},
height: '20%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Short'
},
top: '25%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Spread'
},
top: '50%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Profit/Loss'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
plotOptions: {
column: {
zones: [{
value: 0,
color: 'red'
}, {
color: 'green'
}]
}
},
series: [{
name: 'Natural Gas March 2017 Contract - Long',
data: secondLeg1
}, {
name: 'Natural Gas April 2017 Contract - Short',
data: secondLeg2,
yAxis: 1
}, {
name: 'Spread (Long minus Short)',
data: secondSpread,
yAxis: 2
}, {
type: 'column',
name: 'Profit/Loss in US Dollars',
data: secondProfit,
yAxis: 3
}],
exporting: {
buttons: {
reverseButton: {
text: 'Reverse',
onclick: function() {
var reversed = this.yAxis[0].reversed;
this.yAxis[0].update({
reversed: !reversed
});
reversed = this.yAxis[1].reversed;
this.yAxis[1].update({
reversed: !reversed
});
reversed = this.yAxis[2].reversed;
this.yAxis[2].update({
reversed: !reversed
});
reversed = this.yAxis[3].reversed;
this.yAxis[3].update({
reversed: !reversed
});
this.redraw();
},
align: 'left',
x: 350,
y: 35
},
yearDownButton: {
text: 'Year Down',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
},
align: 'left',
x: 450,
y: 35
},
yearUpButton: {
text: 'Year Up',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
},
align: 'left',
x: 550,
y: 35
}
}
}
};
function drawSecondChart() {
secondChart = new Highcharts.StockChart(secondChartOptions);
}
$.ajax({
url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20100301000000%22%2C%22end%3D20170228000000%22%2C%22daily%22%2C%22false%22%5D%5D&method=get",
complete: function(data) {
var jsonChartData = JSON.parse(data['responseText']);
var secondChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20100301000000']['end=20170228000000']['daily']['false']['value']['message'];
secondChartData = JSON.parse(secondChartData);
var secondChartDataLength = secondChartData.length;
for (var i = 0; i < secondChartDataLength; i++) {
secondLeg1.push([
secondChartData[i]['timestamp'],
secondChartData[i]['leg1']
]);
secondLeg2.push([
secondChartData[i]['timestamp'],
secondChartData[i]['leg2']
]);
secondSpread.push([
secondChartData[i]['timestamp'],
secondChartData[i]['spread']
]);
secondProfit.push([
secondChartData[i]['timestamp'],
secondChartData[i]['profit']
]);
}
drawSecondChart();
$('#resetButton').on("click", function(e) {
e.preventDefault();
$("#secondChartContainer").empty();
secondChartOptions.series = [];
secondChartOptions.series.push({
name: 'Natural Gas March 2017 Contract - Long',
data: secondLeg1
});
secondChartOptions.series.push({
name: 'Natural Gas April 2017 Contract - Short',
data: secondLeg2,
yAxis: 1
});
secondChartOptions.series.push({
name: 'Spread (Long minus Short)',
data: secondSpread,
yAxis: 2
});
secondChartOptions.series.push({
type: 'column',
name: 'Profit/Loss in US Dollars',
data: secondProfit,
yAxis: 3
});
secondChart = new Highcharts.StockChart(secondChartOptions);
});
}
});
//third chart
var thirdLeg1 = [],
thirdLeg2 = [],
thirdSpread = [],
thirdProfit = [];
var thirdChart = null,
thirdChartOptions = {
chart: {
renderTo: 'thirdChartContainer',
height: 600
},
rangeSelector: {
selected: 1
},
title: {
text: 'Natural Gas'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Long'
},
height: '20%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'NG - Short'
},
top: '25%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Spread'
},
top: '50%',
height: '20%',
offset: 0,
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Profit/Loss'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
plotOptions: {
column: {
zones: [{
value: 0,
color: 'red'
}, {
color: 'green'
}]
}
},
series: [{
name: 'Natural Gas March 2017 Contract - Long',
data: thirdLeg1
}, {
name: 'Natural Gas April 2017 Contract - Short',
data: thirdLeg2,
yAxis: 1
}, {
name: 'Spread (Long minus Short)',
data: thirdSpread,
yAxis: 2
}, {
type: 'column',
name: 'Profit/Loss in US Dollars',
data: thirdProfit,
yAxis: 3
}],
exporting: {
buttons: {
reverseButton: {
text: 'Reverse',
onclick: function() {
var reversed = this.yAxis[0].reversed;
this.yAxis[0].update({
reversed: !reversed
});
reversed = this.yAxis[1].reversed;
this.yAxis[1].update({
reversed: !reversed
});
reversed = this.yAxis[2].reversed;
this.yAxis[2].update({
reversed: !reversed
});
reversed = this.yAxis[3].reversed;
this.yAxis[3].update({
reversed: !reversed
});
this.redraw();
},
align: 'left',
x: 350,
y: 35
},
yearDownButton: {
text: 'Year Down',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min - 31556952000, xExtreme.max - 31556952000)
},
align: 'left',
x: 450,
y: 35
},
yearUpButton: {
text: 'Year Up',
onclick: function() {
var xExtreme = this.xAxis[0].getExtremes();
// console.log(xExtreme.min);
this.xAxis[0].setExtremes(xExtreme.min + 31556952000, xExtreme.max + 31556952000)
},
align: 'left',
x: 550,
y: 35
}
}
}
};
function drawThirdChart() {
thirdChart = new Highcharts.StockChart(thirdChartOptions);
}
$.ajax({
url: "http://52.55.116.82/ui-chart/data?paths=%5B%5B%22strategy%22%2C%22code%3DSPREAD-NGH-NGJ%22%2C%22referenceYear%3D2016%22%2C%22start%3D20161212000000%22%2C%22end%3D20161212235900%22%2C%22minutes%22%2C%22false%22%5D%5D&method=get",
complete: function(data) {
var jsonChartData = JSON.parse(data['responseText']);
var thirdChartData = jsonChartData['jsonGraph']['strategy']['code=SPREAD-NGH-NGJ']['referenceYear=2016']['start=20161212000000']['end=20161212235900']['minutes']['false']['value']['message'];
thirdChartData = JSON.parse(thirdChartData);
var thirdChartDataLength = thirdChartData.length;
for (var i = 0; i < thirdChartDataLength; i++) {
thirdLeg1.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['leg1']
]);
thirdLeg2.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['leg2']
]);
thirdSpread.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['spread']
]);
thirdProfit.push([
thirdChartData[i]['timestamp'],
thirdChartData[i]['profit']
]);
}
drawThirdChart();
$('#resetButton').on("click", function(e) {
e.preventDefault();
$("#thirdChartContainer").empty();
thirdChartOptions.series = [];
thirdChartOptions.series.push({
name: 'Natural Gas March 2017 Contract - Long',
data: thirdLeg1
});
thirdChartOptions.series.push({
name: 'Natural Gas April 2017 Contract - Short',
data: thirdLeg2,
yAxis: 1
});
thirdChartOptions.series.push({
name: 'Spread (Long minus Short)',
data: thirdSpread,
yAxis: 2
});
thirdChartOptions.series.push({
type: 'column',
name: 'Profit/Loss in US Dollars',
data: thirdProfit,
yAxis: 3
});
thirdChart = new Highcharts.StockChart(thirdChartOptions);
});
}
});
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="thirdChartContainer" style="height: 600px; margin-top: 1em"></div>
檢查您的控制檯。我猜是因爲你試圖從不安全的源碼（http，不是https）中加載腳本。所以無論你的問題是什麼，它是否解決它：''？ –
不同的失敗，但相同的藥：http://stackoverflow.com/q/14499783/ – Teemu
可能重複的[jsFiddle：html和js之間沒有連接？無法從按鈕調用簡單的函數？]（http://stackoverflow.com/questions/14499783/jsfiddle-no-connection-between-html-and-js-cant-call-simple-function-from-but） –