将其他数据设置为highcharts系列
有没有办法将一些额外的数据传递给系列对象，将用于显示在图表“工具提示”？
例如
tooltip: { formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ Highcharts.dateFormat('%b %e', this.x) +': '+ this.y; } 在这里我们只能使用series.name，this.x＆this.y来编辑。 可以说，我需要通过另一个dynamic的价值单独的数据集，并可以通过系列对象访问。 这可能吗？
谢谢大家提前。
是的，如果你设置了如下的系列对象，其中每个数据点是一个散列，那么你可以传递额外的值：
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>'; } }
完整的例子在这里： http : //jsfiddle.net/japanick/dWDE6/314/
另外，通过这个解决scheme，您甚至可以根据需要放置多个数据 ：
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' }] }]
谢谢Nick。
我使用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＃代码，但我inheritance了该项目。
只是为了增加一些活力：
这是为了生成具有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.
希望它可以帮助别人。
