-1
Ich bin nicht in der Lage, diesen Code in jsfiddle.Ich kann nicht herausfinden, wo das Problem ist.Ich muss den HTML-Teil ändern.Wenn dann was ist? Kann mir jemand auf diese HilfeIch bin wirklich fest hier.Ich kann nicht verstehen, was das Problem ist.Warum kann ich diesen Code nicht in JsFiddle ausführen? Muss ich den HTML-Code ändern?
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>
Konsole überprüfen. Ich schätze, weil Sie versuchen, ein Skript aus einer unsicheren Quelle (http, nicht https) zu laden. Also, was ist Ihr Problem, repariert es es: ''? –
Andere Fehler, aber das gleiche Medikament: http://StackOverflow.com/q/14499783/ – Teemu
Mögliche Duplikate von [jsFiddle: keine Verbindung zwischen HTML und js? Kann einfache Funktion von Knopf nicht anrufen?] (Http://stackoverflow.com/questions/14499783/jsfiddle-no-connection-between-html-and-js-cant-call-simple-function-from-but) –