【问题标题】:Set Additional Data to highcharts series将附加数据设置为 highcharts 系列
【发布时间】: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'吗?或“尺寸”

标签: javascript jquery highcharts


【解决方案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 =&gt; [row['timestamp'], row['value']])data: chartData.map(row =&gt; [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.
    

    希望对某人有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-01-12
      • 1970-01-01
      • 2018-07-15
      • 1970-01-01
      相关资源
      最近更新 更多