Đặt dữ liệu bổ sung cho chuỗi highcharts

Có cách nào để truyền một số dữ liệu bổ sung cho đối tượng chuỗi sẽ sử dụng để hiển thị trong biểu đồ 'tooltip' không?

ví dụ

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

Ở đây chúng ta chỉ có thể sử dụng series.name, this.x & this.y cho chuỗi. giả sử tôi cần chuyển một giá trị động khác một mình với tập dữ liệu và có thể truy cập thông qua đối tượng chuỗi. điều này có thể không

Trước tiên xin cảm ơn tất cả các bạn.

Có, nếu bạn thiết lập đối tượng chuỗi như sau, trong đó mỗi điểm dữ liệu là một hàm băm, thì bạn có thể truyền các giá trị bổ sung:

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

Trong chú giải công cụ của bạn, bạn có thể truy cập nó thông qua thuộc tính "điểm" của đối tượng được truyền vào:

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

Ví dụ đầy đủ ở đây: https://jsfiddle.net/burwelldesigns/jeoL5y7s/

Ngoài ra, với giải pháp này, bạn thậm chí có thể đặt nhiều dữ liệu bao nhiêu tùy ý :

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

Cảm ơn Nick.

Đối với dữ liệu chuỗi thời gian, đặc biệt là có đủ điểm dữ liệu để kích hoạt ngưỡng turbo , các giải pháp được đề xuất ở trên sẽ không hoạt động. Trong trường hợp ngưỡng turbo, điều này là do Highcarts hy vọng các điểm dữ liệu sẽ là một mảng như:

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

Để không mất lợi ích của ngưỡng turbo (điều quan trọng khi xử lý nhiều điểm dữ liệu), tôi lưu trữ dữ liệu bên ngoài biểu đồ và tìm kiếm điểm dữ liệu trong formatterhàm tooltip . Đây là một ví dụ:

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

Cách tiếp cận này sẽ làm việc cho tất cả các loại biểu đồ.

Tôi đang sử dụng AJAX để lấy dữ liệu của mình từ SQL Server, sau đó tôi chuẩn bị một mảng js được sử dụng làm dữ liệu trong biểu đồ của tôi. Mã JavaScript một khi AJAX thành công:

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

Bây giờ để hiển thị thêm siêu dữ liệu trong tooltip:

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

Tôi sử dụng DataRow để lặp qua tập kết quả của mình, sau đó tôi sử dụng một lớp để gán các giá trị trước khi gửi lại ở định dạng Json. Đây là mã C # trong hành động của bộ điều khiển được gọi bởi Ajax.

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

Tôi nhận ra có một cách hiệu quả và dễ chấp nhận hơn để viết mã trong C # nhưng tôi đã kế thừa dự án.

Chỉ cần thêm một số loại năng động:

Đã làm điều này để tạo dữ liệu cho biểu đồ cột xếp chồng với 10 loại.
Tôi muốn có cho mỗi chuỗi dữ liệu loại 4 và muốn hiển thị thêm thông tin (hình ảnh, câu hỏi, phân tâm và câu trả lời dự kiến) cho từng chuỗi dữ liệu:

<?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"
);
?>

Trong phần 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.

Hy vọng nó sẽ giúp được ai đó.