Dalam beberapa kasus, kita perlu menambahkan label ke titik-titik dalam plot scatter Highcharts. Namun, tidak seperti chart lainnya, Highcharts tidak memungkinkan penggunaan nilai string sebagai field data. Oleh karena itu, kita harus menggunakan cara lain untuk mengaturnya.

Pada contoh di atas, saya menunjukkan bagaimana kita dapat mengaturnya dengan menggunakan fitur "Custom code" dalam Highcharts Cloud. Kita dapat membuat parser CSV sendiri dan menggunakannya untuk memproses data yang diperoleh dari file CSV.

Parser Code

var data = options.data.csv;
var newSeries;
var oldSeriesOptions = options.series

console.log(options)

// Split the lines
var lines = data.split('\n');
lines.forEach(function(line, lineNo) {
 var items = line.split(';');

 // For first line create appropriate series
 if (lineNo === 0) {
 newSeries = [{
 name: items[1],
 data: [],
 dataLabels: {
 format: "{point.label}",
 enabled: true
 }
 }, {
 name: items[2],
 data: [],
 type: 'line',
 color: 'red',
 marker: {
 enabled: true,
 }
 }]
 } else {
 newSeries[0].data.push({
 x: parseInt(items[0]),
 y: parseInt(items[1]),
 label: items[3].slice(1, items[3].length -1)
 })
 
 newSeries[1].data.push({
 x: parseFloat(items[0]),
 y: parseFloat(items[2])
 })
 }

});
options.data.csv = null
options.series = newSeries

Live example : https://cloud.highcharts.com/show/SJYe2nwZ7

Contoh

Pada contoh di atas, kita dapat melihat bahwa parser code kami membuat dua seri: satu untuk line chart dan satu lagi untuk scatter plot. Kami juga menggunakan fitur dataLabels untuk menampilkan label ke titik-titik dalam plot.

Contoh Chart Live

Kita dapat membuka contoh chart live tersebut di HC Cloud dan mencoba mengeditnya.

Dokumentasi Highcharts API

Jika Anda ingin mempelajari lebih lanjut tentang penggunaan label untuk point dalam scatter plot dengan Highcharts, saya merekomendasikan dokumentasi Highcharts API. Kita dapat mencari informasi tentang opsi name pada series.scatter dan juga tentang fitur dataLabels.