为什么我不能在JsFiddle中运行此代码？我是否需要更改html代码？

时间：2017-02-15 16:00:00

标签： javascript jquery

我无法在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>

1 个答案:

答案 0 :(得分：0)

由于看起来您只使用股票图表，因此您不应加载http://code.highcharts.com/highcharts.src.js（因为它设置了HighCharts对象）。来自documentation：

  

Highcharts已包含在Highstock中，因此无需加载两者。 highstock.js文件包含在包中。还包括highmaps.js文件，但与highstock.js不同，这不包括完整的Highcharts功能集。 Highstock和Highmaps可以加载单独的文件，如下所示：

<script src="/js/highstock.js"></script>
<script src="/js/highmaps.js"></script>
     

但是单独的文件不能在同一页面中相互运行或与highcharts.js一起运行。因此，如果在同一页面中需要库存或地图，或者使用基本的Highcharts，则可以将它们作为模块加载：

取出它会使你的代码加载图形。

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="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>

<div id="secondChartContainer" style="height: 600px; margin-top: 1em">
<div id="thirdChartContainer" style="height: 600px; margin-top: 1em"></div>

相关问题
最新问题