[JQUERY] highcharts 시리즈에 추가 데이터 설정

highcharts 시리즈에 추가 데이터 설정

해결법

1. ---

   1.각 데이터 포인트는 해시 다음과 같은 일련의 객체를 설정 한 경우 예, 당신은 여분의 값을 전달할 수 있습니다 :

   각 데이터 포인트는 해시 다음과 같은 일련의 객체를 설정 한 경우 예, 당신은 여분의 값을 전달할 수 있습니다 :

   new Highcharts.Chart( {
       ...,
       series: [ {
           name: 'Foo',
           data: [
               {
                   y : 3,
                   myData : 'firstPoint'
               },
               {
                   y : 7,
                   myData : 'secondPoint'
               },
               {
                   y : 1,
                   myData : 'thirdPoint'
               }
           ]
       } ]
   } );
   

   당신의 툴팁에서는 전달 된 개체의 "포인트"속성을 통해 액세스 할 수 있습니다 :

   tooltip: {
       formatter: function() {
           return 'Extra data: <b>' + this.point.myData + '</b>';
       }
   }
   

   여기에 전체 예 : https://jsfiddle.net/burwelldesigns/jeoL5y7s/

2. ---

   2.또한이 솔루션과 함께, 당신도 당신이 원하는만큼 여러 데이터를 넣을 수 있습니다 :

   또한이 솔루션과 함께, 당신도 당신이 원하는만큼 여러 데이터를 넣을 수 있습니다 :

   tooltip: {
       formatter: function () {
           return 'Extra data: <b>' + this.point.myData + '</b><br> Another Data: <b>' + this.point.myOtherData + '</b>';
       }
   },
   
   series: [{
       name: 'Foo',
       data: [{
           y: 3,
           myData: 'firstPoint',
           myOtherData: 'Other first data'
       }, {
           y: 7,
           myData: 'secondPoint',
           myOtherData: 'Other second data'
       }, {
           y: 1,
           myData: 'thirdPoint',
           myOtherData: 'Other third data'
       }]
   }]
   

   당신에게 닉 감사드립니다.

3. ---

   3.특히 충분한 데이터 포인트 시계열 데이터는, 터보 임계 값을 활성화하려면를 들어, 위의 제안 된 솔루션은 작동하지 않습니다. Highcarts 데이터 포인트와 같은 배열 될 것으로 예상되므로 터보 액의 경우이다 :

   특히 충분한 데이터 포인트 시계열 데이터는, 터보 임계 값을 활성화하려면를 들어, 위의 제안 된 솔루션은 작동하지 않습니다. Highcarts 데이터 포인트와 같은 배열 될 것으로 예상되므로 터보 액의 경우이다 :

   series: [{
       name: 'Numbers over the course of time',
       data: [
         [1515059819853, 1],
         [1515059838069, 2],
         [1515059838080, 3],
         // you get the idea
       ]
     }]
   

   (데이터 포인트를 많이 취급 할 때 중요하다) 터보 임계 값의 혜택을 상실하지 않기 위해, 나는 차트의 데이터 외부를 저장하고 기능 포맷터 툴팁의 데이터 포인트를 찾아보십시오. 다음은 그 예이다 :

   const chartData = [
     { timestamp: 1515059819853, value: 1, somethingElse: 'foo'},
     { timestamp: 1515059838069, value: 2, somethingElse: 'bar'},
     { timestamp: 1515059838080, value: 3, somethingElse: 'baz'},
     // you get the idea
   ]
   
   const Chart = Highcharts.stockChart(myChart, {
     // ...options
     tooltip: {
       formatter () {
         // this.point.x is the timestamp in my original chartData array
         const pointData = chartData.find(row => row.timestamp === this.point.x)
         console.log(pointData.somethingElse)
       }
     },
     series: [{
         name: 'Numbers over the course of time',
         // restructure the data as an array as Highcharts expects it
         // array index 0 is the x value, index 1 is the y value in the chart
         data: chartData.map(row => [row.timestamp, row.value])
       }]
   })
   

   이 방법은 모든 차트 유형 작동합니다.

4. ---

   4.그때 내 차트의 데이터로 사용되는 JS 배열을 준비 SQL 서버에서 내 데이터를 얻을 수 AJAX를 사용하고 있습니다. AJAX를 한 번에 자바 스크립트 코드는 성공적인이다 :

   그때 내 차트의 데이터로 사용되는 JS 배열을 준비 SQL 서버에서 내 데이터를 얻을 수 AJAX를 사용하고 있습니다. AJAX를 한 번에 자바 스크립트 코드는 성공적인이다 :

   ...,
   success: function (data) {
               var fseries = [];
               var series = [];
               for (var arr in data) {
                   for (var i in data[arr]['data'] ){
                       var d = data[arr]['data'][i];
                       //if (i < 5) alert("d.method = " + d.method);
                       var serie = {x:Date.parse(d.Value), y:d.Item, method:d.method };
                       series.push(serie);
                   }
                   fseries.push({name: data[arr]['name'], data: series, location: data[arr]['location']});
                   series = [];
               };
               DrawChart(fseries);
            },
   

   이제 툴팁에 추가 메타 데이터를 표시합니다 :

   ...
   tooltip: {
       xDateFormat: '%m/%d/%y',
       headerFormat: '<b>{series.name}</b><br>',
       pointFormat: 'Method: {point.method}<br>Date: {point.x:%m/%d/%y } <br>Reading: {point.y:,.2f}',
       shared: false,
   },
   

   그때 나는 내가 이전에 JSON 형식으로 다시 전달에 값을 할당하는 클래스를 사용하여 내 결과 집합을 통해 반복에 DataRow를 사용합니다. 여기에 Ajax를 호출하는 컨트롤러 액션에서 C # 코드입니다.

   public JsonResult ChartData(string dataSource, string locationType, string[] locations, string[] methods, string fromDate, string toDate, string[] lstParams)
   {
       List<Dictionary<string, object>> dataResult = new List<Dictionary<string, object>>();
       Dictionary<string, object> aSeries = new Dictionary<string, object>();
       string currParam = string.Empty;        
   
       lstParams = (lstParams == null) ? new string[1] : lstParams;
       foreach (DataRow dr in GetChartData(dataSource, locationType, locations, methods, fromDate, toDate, lstParams).Rows)
       {
           if (currParam != dr[1].ToString())
           {
               if (!String.IsNullOrEmpty(currParam))       //A new Standard Parameter is read and add to dataResult. Skips first record.
               {
                   Dictionary<string, object> bSeries = new Dictionary<string, object>(aSeries); //Required else when clearing out aSeries, dataResult values are also cleared
                   dataResult.Add(bSeries);
                   aSeries.Clear();
               }
               currParam = dr[1].ToString(); 
               aSeries["name"] = cParam;
               aSeries["data"] = new List<ChartDataModel>();
               aSeries["location"] = dr[0].ToString();
           }
   
           ChartDataModel lst = new ChartDataModel();
           lst.Value = Convert.ToDateTime(dr[3]).ToShortDateString();
           lst.Item = Convert.ToDouble(dr[2]);
           lst.method = dr[4].ToString();
           ((List<ChartDataModel>)aSeries["data"]).Add(lst);
       }
       dataResult.Add(aSeries);
       var result = Json(dataResult.ToList(), JsonRequestBehavior.AllowGet);  //used to debug final dataResult before returning to AJAX call.
       return result;
   }
   

   내가 거기 C #에서 코드를보다 효율적이고 수용 가능한 방법입니다하지만이 프로젝트를 상속 알고 있습니다.

5. ---

   5.그냥 동성의 어떤 종류를 추가합니다 :

   그냥 동성의 어떤 종류를 추가합니다 :

   10 개 범주 적층 열 차트에 대한 데이터를 발생이 없었다. 나는 각 카테고리 4 데이터 계열을하고 싶어하고, 데이터 계열의 각각에 대한 추가 정보 (이미지, 질문, distractor 예상 답)을 표시하고 싶었 :

   <?php 
   
   while($n<=10)
   {
       $data1[]=array(
           "y"=>$nber1,
           "img"=>$image1,
           "ques"=>$ques,
           "distractor"=>$distractor1,
           "answer"=>$ans
       );
       $data2[]=array(
           "y"=>$nber2,
           "img"=>$image2,
           "ques"=>$ques,
           "distractor"=>$distractor2,
           "answer"=>$ans
       );
       $data3[]=array(
           "y"=>$nber3,
           "img"=>$image3,
           "ques"=>$ques,
           "distractor"=>$distractor3,
           "answer"=>$ans
       );
       $data4[]=array(
           "y"=>$nber4,
           "img"=>$image4,
           "ques"=>$ques,
           "distractor"=>$distractor4,
           "answer"=>$ans
       );
   }
   
   // Then convert the data into data series:
   
   $mydata[]=array(
       "name"=>"Distractor #1",
       "data"=>$data1,
       "stack"=>"Distractor #1"
   );
   $mydata[]=array(
       "name"=>"Distractor #2",
       "data"=>$data2,
       "stack"=>"Distractor #2"
   );
   $mydata[]=array(
       "name"=>"Distractor #3",
       "data"=>$data3,
       "stack"=>"Distractor #3"
   );
   $mydata[]=array(
       "name"=>"Distractor #4",
       "data"=>$data4,
       "stack"=>"Distractor #4"
   );
   ?>
   

   highcharts 섹션에서 :

   var mydata=<? echo json_encode($mydata)?>;
   
   // Tooltip section
   tooltip: {
       useHTML: true,
           formatter: function() {
   
               return 'Question ID: <b>'+ this.x +'</b><br/>'+
                      'Question: <b>'+ this.point.ques +'</b><br/>'+
                      this.series.name+'<br> Total attempts: '+ this.y +'<br/>'+
                      "<img src=\"images/"+ this.point.img +"\" width=\"100px\" height=\"50px\"/><br>"+
                      'Distractor: <b>'+ this.point.distractor +'</b><br/>'+
                      'Expected answer: <b>'+ this.point.answer +'</b><br/>';
                  }
              },
   
   // Series section of the highcharts 
   series: mydata
   // For the category section, just prepare an array of elements and assign to the category variable as the way I did it on series.
   

   누군가가 도움이되기를 바랍니다.

from https://stackoverflow.com/questions/8514457/set-additional-data-to-highcharts-series by cc-by-sa and MIT license