Javascript 将其他数据设置为highcharts系列

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

比如说

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

工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
Highcharts.dateFormat（“%b%e”，this.x）+'：“+this.y；
}

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

---

提前感谢大家。

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

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

工具提示：{
格式化程序：函数（）{
返回“额外数据：”+this.point.myData+”；
}
}

---

这里的完整示例：

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

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

工具提示：{
格式化程序：函数（）{
返回“额外数据：”+this.point.myData+”
另一个数据：“+this.point.myOtherData+”；
}
},
系列：[{
名称：“Foo”，
数据：[{
y:3，
myData:'firstPoint'，
myOtherData:“其他第一个数据”
}, {
y:7，
myData:“第二点”，
myOtherData:“其他第二个数据”
}, {
y:1,，
myData:“第三点”，
myOtherData:“其他第三方数据”
}]
}]

---

谢谢你，尼克。

为了增添活力：

为包含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.

var mydata=；
//工具提示部分
工具提示：{
是的，
格式化程序：函数（）{
返回“问题ID:”+this.x+”
+
'问题：'+this.point.ques+'
'+
this.series.name+'
总尝试次数：'+this.y+'
+
“
”+
'干扰物：'+this.point.Distractor+'
'+
'预期答案：'+this.point.answer+'
'；
}
},
//海图系列部分
系列：mydata
//对于category部分，只需准备一个元素数组，并按照我在系列中所做的方式分配给category变量。

---

希望它能帮助别人。

我正在使用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);
         },

。。。，
成功：功能（数据）{
var fseries=[]；
var系列=[]；
for（数据中的var arr）{
对于（数据[arr]['data']中的var i）{
var d=数据[arr]['data'][i]；
//如果（i<5）警报（“d.method=“+d.method”）；
var serie={x:Date.parse（d.Value），y:d.Item，method:d.method}；
系列推送（系列）；
}
push（{name:data[arr]['name']，data:series，location:data[arr]['location']}）；
系列=[]；
};
图纸（F系列）；
},

现在要在工具提示中显示额外的元数据：

...
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,
},

。。。
工具提示：{
xDateFormat:“%m/%d/%y”，
headerFormat:“{series.name}
”，
pointFormat:'方法：{point.Method}
日期：{point.x:%m/%d/%y}
读取：{point.y:，.2f}'，
分享：错，
},

我使用一个DataRow来迭代我的结果集，然后在以Json格式传回之前使用一个类来分配值

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

publicJSONResult图表数据（字符串数据源、字符串位置类型、字符串[]位置、字符串[]方法、字符串fromDate、字符串toDate、字符串[]lstParams）
{
列表数据结果=新列表（）；
Dictionary aSeries=新字典（）；
string currParam=string.Empty；
lstParams=（lstParams==null）？新字符串[1]：lstParams；
foreach（GetChartData中的DataRow dr（数据源、位置类型、位置、方法、fromDate、toDate、lstParams）。行）
{
如果（currParam！=dr[1].ToString（））
{
如果（！String.IsNullOrEmpty（currParam））//读取一个新的标准参数并将其添加到dataResult。跳过第一条记录。
{
Dictionary bSeries=new Dictionary（aSeries）；//清除aSeries时，还需要清除dataResult值
dataResult.Add（b系列）；
aSeries.Clear（）；
}
currParam=dr[1]。ToString（）；
A系列[“名称”]=cParam；
A系列[“数据”]=新列表（）；
aSeries[“location”]=dr[0]。ToString（）；
}
ChartDataModel lst=新的ChartDataModel（）；
lst.Value=Convert.ToDateTime（dr[3]）.ToSortDateString（）；
lst.Item=Convert.ToDouble（dr[2]）；
lst.method=dr[4].ToString（）；
（（列表）A系列[“数据]）。添加（lst）；
}
dataResult.Add（一系列）；
var result=Json（dataResult.ToList（），JsonRequestBehavior.AllowGet）；//用于在返回AJAX调用之前调试最终数据结果。
返回结果；
}

---

我意识到有一种更有效、更可接受的方法可以用C#编码，但我继承了该项目。

对于时间序列数据，尤其是有足够的数据点来激活，上述建议的解决方案将不起作用。在turbo threshold的情况下，这是因为Highcarts希望数据点是一个类似以下的数组：

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

为了不失去turbo阈值的好处（这在处理大量数据点时非常重要），我将数据存储在图表之外，并在图表中查找数据点

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