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.
series
objek Anda , dan menampilkannya di penangan ini?Jawaban:
Ya, jika Anda menyiapkan objek seri seperti berikut, di mana setiap titik datanya adalah hash, Anda dapat meneruskan nilai ekstra:
Di tooltip Anda, Anda dapat mengaksesnya melalui atribut "point" dari objek yang diteruskan:
Contoh lengkapnya di sini: https://jsfiddle.net/burwelldesigns/jeoL5y7s/
sumber
Selain itu, dengan solusi ini, Anda bahkan dapat memasukkan banyak data sebanyak yang Anda inginkan :
Terima kasih Nick.
sumber
datetime
nilai x tetapi ingin menambahkan data tambahan ke tooltip.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:
Agar tidak kehilangan manfaat ambang turbo (yang penting saat menangani banyak titik data), saya menyimpan data di luar bagan dan mencari titik data di
formatter
fungsi tooltip . Berikut contohnya:Pendekatan ini akan bekerja untuk semua jenis grafik.
sumber
data: _.map(data, row => [row['timestamp'], row['value']])
seharusnyadata: 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 .chartData
. Saya terbiasa menggunakan lodash tetapi Anda benar. Saya memperbarui contoh saya jadi itu agnostik perpustakaan. Terima kasih.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:
Sekarang untuk menampilkan meta-data tambahan di tooltip:
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.
Saya menyadari ada cara yang lebih efisien dan dapat diterima untuk membuat kode dalam C # tetapi saya mewarisi proyek tersebut.
sumber
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:
Di bagian highcharts:
Semoga bisa membantu seseorang.
sumber