将附加数据设置为 highcharts 系列

Posted 2023-02-16

【中文标题】将附加数据设置为 highcharts 系列

【英文标题】：Set Additional Data to highcharts series

【发布时间】：2012-01-20 19:35:39

【问题描述】：

有没有办法将一些额外的数据传递给将用于在图表“工具提示”中显示的系列对象？

例如

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

这里我们只能使用 series.name ， this.x 和 this.y 到系列。假设我需要单独使用数据集传递另一个动态值，并且可以通过系列对象访问。这可能吗？

提前谢谢大家。

【问题讨论】：

javascript 对传递的对象并不挑剔，如果不使用它们通常会忽略它们。它们可能会被库的内部代码剥离，但不一定，而且通常值得一试。您是否尝试将其他数据附加到您的 series 对象，并在此处理程序中显示它？

@MerlynMorgan-Graham - 我是“HighCharts”的新手。你能发布任何我能找到示例的链接吗？非常感谢你帮助我。

@Sam，我的回答有一个完整的工作示例，您可以查看一下。如果它不完全符合您的要求，请告诉我。

如何在气泡图的情况下添加像 myData 这样的附加数据，因为数据数组类似于数据：[[12,43,13],[74,23,44]] 例如上面的数据值的键是什么，有'y'，有'x'，'y'和'z'吗？或“尺寸”

【参考方案1】：

是的，如果你像下面这样设置系列对象，其中每个数据点都是一个哈希，那么你可以传递额外的值：

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

在您的工具提示中，您可以通过传入对象的“point”属性访问它：

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

此处为完整示例：https://jsfiddle.net/burwelldesigns/jeoL5y7s/

【讨论】：

我知道这是一个旧答案，但小提琴链接不再显示相关示例。

@undefinedvariable - 嗯，看起来其他人已经编辑了这个并将新版本设置为 jsfiddle 中的“基础”版本。那真不幸。更新了小提琴，现在链接到答案中的特定版本。

@Nick，太棒了，谢谢。顺便说一句，很好的答案。我用完了未使用的默认值来潜入信息。

如果 myData 是一个数组，如何访问它？

谢谢，在气泡图的情况下，如何添加 myData 等附加数据，因为数据数组类似于数据：[[12,43,13],[74,23,44]] 例如上面的数据值的键是什么，有'y'，有'x'，'y'和'z'吗？还是“尺寸”？

【参考方案2】：

对于时间序列数据，尤其是有足够的数据点来激活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])
    ]
)

此方法适用于所有图表类型。

【讨论】：

感谢您的回答，这对于在 High Stock 图表中显示其他数据非常有帮助。

不应该data: _.map(data, row => [row['timestamp'], row['value']]) 是data: chartData.map(row => [row.timestamp, row.value]) 吗？此外，您不需要 lodash；你可以使用Array.find。 IE 不支持，但你已经在使用 ES6 (const) 和 MS stopped supporting IE in 2016。

chartData 很好。我习惯使用 lodash 但你是对的。我更新了我的示例，因此它与库无关。谢谢。

【参考方案3】：

此外，使用此解决方案，您甚至可以根据需要放置多个数据：

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

谢谢尼克。

【讨论】：

当使用 [x, y] 非对象格式时，“附加数据”是不可能的？我们将 datetime 作为 x 值，但想在工具提示中添加额外的数据。

时间序列数据示例：var serie = x:Date.parse(d.Value), y:d.Item, method:d.method ;

【参考方案4】：

我使用 AJAX 从 SQL Server 获取数据，然后准备一个 js 数组用作图表中的数据。 AJAX 成功后的 JavaScript 代码：

...,
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# 编写代码有一种更有效和更可接受的方式，但我继承了该项目。

【参考方案5】：

只是为了增加一些活力：

这样做是为了为包含 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"
);
?>

在高位图表部分：

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.

希望对某人有所帮助。