將附加數據設置爲高亮系列

Question

是否有任何方式將一些額外的數據傳遞給將用於顯示在圖表「工具提示」中的系列對象？

例如

tooltip: { 
    formatter: function() { 
       return '<b>'+ this.series.name +'</b><br/>'+ 
      Highcharts.dateFormat('%b %e', this.x) +': '+ this.y; 
    } 

這裏我們只能用series.name，this.x & this.y的系列。可以說我需要通過另一個動態值單獨與數據集並可以通過系列對象訪問。這可能嗎？

謝謝大家提前。

Answer 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>'; 
    } 
} 

完整的示例在這裏：「對象的屬性，通過http://jsfiddle.net/japanick/dWDE6/314/

Answer 2

此外，該解決方案，你甚至可以p ut多個數據盡你所需：

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' 
    }] 
}] 

謝謝尼克。

Answer 3

只需添加活力某種：

這篇用於與10個類別堆積柱形圖生成數據。
我想有用於每個類別4數據序列，想要對每個數據系列顯示的附加信息（圖像，問題，牽開器和預期的答案）：

<?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. 

希望它可以幫助別人。

Answer 4

我使用AJAX從SQL Server獲取數據，然後準備一個用作圖表中數據的js數組。 JavaScript代碼一旦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, 
}, 

我用一個DataRow通過我的結果集進行迭代，然後我用一個類在以Json格式傳回之前分配值。以下是由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＃中進行編碼，但我繼承了該項目。

Answer 5

對於時間序列數據，特別是有足夠的數據點來激活turbo threshold，以上提出的解決方案將不起作用。在渦輪增壓的閾值的情況下，這是因爲Highcarts預計該數據點要像一個數組：

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

爲了不失去渦輪門檻的優勢（與大量數據處理時，這是很重要點），我將數據存儲在圖表的外部，並在工具提示formatter函數中查找數據點。下面是一個示例：

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]) 
    }] 
}) 

此方法適用於所有圖表類型。