2012-04-01 2 views
0

내 높은 차트 기능 안에 메서드를 추가했지만이를 호출하는 데 문제가 있습니다.자바 스크립트 사용자 정의 높은 차트 방법

내가 잘못된 구문을 가지고 있거나 (JS에 상대적으로 새로운) 잘못된 지점에이 메서드를 배치했을 수 있다고 생각합니다. 이 메소드는 내 코드의 맨 아래에 있으며, 주석을 달고 단순히 그래프에 새 포인트를 추가해야하는 addPoint.its라고합니다.

나는 방법으로 경고를하면서 문제 해결을 시도했지만 아직 효과가 없습니다.

을 heres jfiddle : 사전에 어떤 도움

NewHighCharts = function() 
    {      
     chart = new Highcharts.Chart(
     { 
      chart : 
      { 
       renderTo : 'container', 
       type : 'line', 
       marginRight : 130, 
       marginBottom : 25, 
       events: 
       { 
        click: function(e) 
        { 
         // find the clicked values and the series 
         var x = e.xAxis[0].value, 
          y = e.yAxis[0].value, 
          series = this.series[0]; 
         // Add it 
         series.addPoint([x, y]); 
        } 
       } 
      }, 

      title : 
      { 
       text : 'Body Weight', 
       x : -20 //center 
      }, 
      xAxis : 
      { 
       categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
      }, 

      yAxis : 
      { 
       title : 
       { 
        text : 'Weight (lbs)' 
       }, 
       plotLines : [{ 
        value : 0, 
        width : 1, 
        color : '#808080' 
      }] 
      }, 
      tooltip : 
      { 
       formatter : function() 
       { 
        return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + 'lbs'; 
       } 
      }, 
      legend : 
      { 
       layout : 'vertical', 
       align : 'right', 
       verticalAlign : 'top', 
       x : -10, 
       y : 100, 
       borderWidth : 0 
      }, 
      series : [{ 
       name : 'George', 
       data : [185,190,185,180] 
      }, { 
       name : 'Bindu', 
       data : [115,110,112,115] 
      }] 
     });//end of chart 
      //this is the method i added 
     addPoint = function() 
     { 
      alert("You Added a point!") 
      series = this.series[0]; 
      series.addPoint([4, 190]); 
     }; 
    };//end of newHighCharts 
    newChart = new NewHighCharts(); 
    newChart.addPoint(); 

감사 : 여기 http://jsfiddle.net/fourgates/WdMrm/

내 코드입니다!

답변

3

다음은 수정 된 문제가있는 fiddle 사본입니다.

  • 자원로드 순서 당신이 exporting.js가 highcharts 이전에로드 된 것을 볼 수 있습니다 자원 옵션 (제거 및 자원에 추가 다시 simpliy에서 왼쪽으로 표시되는 경우
    문제점 HighCharts의 오류가 정의되지 않은 경우 해결됩니다).
  • 프레임 워크를 선택할 수있는 패널 왼쪽에있는 패널에서 Mootools 대신 jQuery를 사용하십시오. mootols와 함께 사용하려면 어댑터가 필요합니다.
  • 이것을. = 생성자에서 사용하십시오. 이 함수를 사용하지 않으면/obj가 네임 스페이스의 일부가 아닌 전역 변수가됩니다. 따라서 chart =를 대체하고 addPoint = this.char 및 this.addPoint를 대체합니다.
  • 추가 지점에서이 시리즈를 참조 할 곳을 지정해야합니다. 시리즈 대신 this.chart.series를 수행해야합니다.
+0

프로젝트에 코드를 복사 할 때 어떤 이유로 작동하지 않습니다. 모든 것은 마지막 줄에서 끊어집니다 : newChart.addPoint(); 차트가 돌아 오면. 어떤 아이디어? 감사합니다 –

+0

나는 JS를 $ (function() {copied code}) 안에 복사했습니다. –

+0

크롬으로 디버깅 할 수 있습니까? jQuery가 포함되어 있습니까? – marspzb

관련 문제