Set Data Tambahan ke seri highchart


116

adakah cara untuk meneruskan beberapa data tambahan ke objek rangkaian yang akan digunakan untuk ditampilkan di 'tooltip' bagan?

sebagai contoh

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

disini kita hanya bisa menggunakan series.name, this.x & this.y untuk series. katakanlah saya perlu melewatkan nilai dinamis lain sendiri dengan kumpulan data dan dapat mengakses melalui objek seri. apakah ini mungkin?

Terima kasih sebelumnya.


1
Javascript tidak pilih-pilih tentang objek mana yang Anda teruskan, dan biasanya mengabaikannya jika tidak digunakan. Mereka mungkin dilucuti oleh kode internal perpustakaan, tetapi mereka belum tentu, dan biasanya layak dicoba. Sudahkah Anda mencoba menambahkan data tambahan ke seriesobjek Anda , dan menampilkannya di penangan ini?
Merlyn Morgan-Graham

@ MerlynMorgan-Graham - Saya baru di 'HighCharts'. bisakah Anda memposting tautan apa pun yang dapat saya temukan semacam contoh? terima kasih banyak telah membantu saya
Sam

@ Sam, jawaban saya memiliki contoh kerja lengkap yang dapat Anda lihat. Beri tahu saya jika tidak cukup memenuhi kebutuhan Anda.
Nick

Bagaimana saya bisa menambahkan data tambahan seperti myData dalam kasus diagram gelembung karena larik datanya seperti data: [[12, 43, 13], [74, 23, 44]] misalnya apa kunci untuk nilai data seperti di atas memiliki 'y', apakah ada 'x', 'y' dan 'z'? atau 'size'
vishal

Jawaban:


220

Ya, jika Anda menyiapkan objek seri seperti berikut, di mana setiap titik datanya adalah hash, Anda dapat meneruskan nilai ekstra:

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

Di tooltip Anda, Anda dapat mengaksesnya melalui atribut "point" dari objek yang diteruskan:

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

Contoh lengkapnya di sini: https://jsfiddle.net/burwelldesigns/jeoL5y7s/


1
Saya tahu ini jawaban lama, tetapi biola yang ditautkan tidak lagi menunjukkan contoh yang relevan.
variabel tak terdefinisi

@undefinedvariable - hmm, sepertinya orang lain telah mengedit ini dan menetapkan versi baru sebagai versi "dasar" di jsfiddle. Itu sangat disayangkan. Memperbarui biola dan sekarang menautkan ke versi tertentu dalam jawabannya.
Nick

@Nick, luar biasa, terima kasih. Jawaban yang bagus, omong-omong. Saya kehabisan nilai default yang tidak digunakan untuk menyelinap informasi masuk
undefinedvariable

Bagaimana cara mengakses myData jika itu adalah array?
vishal

2
Terima kasih, Bagaimana saya bisa menambahkan data tambahan seperti myData dalam kasus diagram gelembung karena larik datanya seperti data: [[12, 43, 13], [74, 23, 44]] misalnya apa saja kunci untuk nilai data di atas ada 'y', apakah ada 'x', 'y' dan 'z'? atau 'size'?
vishal

17

Selain itu, dengan solusi ini, Anda bahkan dapat memasukkan banyak data sebanyak yang Anda inginkan :

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

Terima kasih Nick.


4
'Data tambahan' tidak dimungkinkan ketika format non-objek [x, y] digunakan? Kami memiliki datetimenilai x tetapi ingin menambahkan data tambahan ke tooltip.
Rvanlaak

Contoh untuk data deret waktu: var serie = {x: Date.parse (d.Value), y: d.Item, method: d.method};
Arjun Upadhyay

15

Untuk data deret waktu, terutama dengan titik data yang cukup untuk mengaktifkan ambang turbo , solusi yang diusulkan di atas tidak akan berfungsi. Dalam kasus ambang turbo, ini karena Highcarts mengharapkan titik data menjadi array seperti:

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

Agar tidak kehilangan manfaat ambang turbo (yang penting saat menangani banyak titik data), saya menyimpan data di luar bagan dan mencari titik data di formatterfungsi tooltip . Berikut contohnya:

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

Pendekatan ini akan bekerja untuk semua jenis grafik.


Terima kasih, atas jawabannya, sangat membantu untuk menampilkan data tambahan dalam grafik Saham Tinggi.
S Kumar

1
Tidak data: _.map(data, row => [row['timestamp'], row['value']])seharusnya data: chartData.map(row => [row.timestamp, row.value])? Selain itu, Anda tidak perlu lodash; Anda dapat menggunakan Array.find . Ini tidak didukung oleh IE, tetapi Anda sudah menggunakan ES6 (const ) dan MS berhenti mendukung IE pada tahun 2016 .
Dan Dascalescu

Hasil tangkapan yang bagus chartData. Saya terbiasa menggunakan lodash tetapi Anda benar. Saya memperbarui contoh saya jadi itu agnostik perpustakaan. Terima kasih.
Christof

3

Saya menggunakan AJAX untuk mendapatkan data saya dari SQL Server, kemudian saya menyiapkan js array yang digunakan sebagai data di bagan saya. Kode JavaScript setelah AJAX berhasil:

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

Sekarang untuk menampilkan meta-data tambahan di 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,
},

Saya menggunakan DataRow untuk mengulang melalui kumpulan hasil saya, lalu saya menggunakan kelas untuk menetapkan nilai sebelum meneruskan kembali dalam format Json. Berikut adalah kode C # dalam aksi kontroler yang dipanggil oleh 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;
}

Saya menyadari ada cara yang lebih efisien dan dapat diterima untuk membuat kode dalam C # tetapi saya mewarisi proyek tersebut.


1

Hanya untuk menambahkan semacam dinamisme:

Melakukan ini untuk menghasilkan data untuk bagan kolom bertumpuk dengan 10 kategori.
Saya ingin memiliki untuk setiap seri data kategori 4 dan ingin menampilkan informasi tambahan (gambar, pertanyaan, pengalih perhatian, dan jawaban yang diharapkan) untuk setiap rangkaian data:

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

Di bagian 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.

Semoga bisa membantu seseorang.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.