我如何在 points highchart 中獲取日期和時間？

Question

我 plot highcharts 在我的頁面上。 這很好用，但我有一個小問題，當我將鼠標放在 hover 上時，我沒有得到日期和時間。

這就是我的 json 的樣子：

[{"metingen":"metingen","Datum":"Datum","data":["5-9-2022",14.6,"5-9-2022",14.8,"6-9-2022",15.948,"6-9-2022",17.112,"6-9-2022",

我的圖表看起來像這樣：

你看到左邊的氣球，它顯示數字 0：14.6。 14.6 是值，很好，但 0 是該值的數字，作為另一點，給出

但是我如何在氣球中顯示屬於該數字的日期和時間？

我的圖表代碼是這樣的：

            $.getJSON("mfrmetingen300RG.json", function(data) {
                const processedData9 = [];

                for (let a = 0; a < data[0].data.length; a += 2) {
                    processedData9.push([data[0].data[a], data[0].data[a + 1]]);
                }

                data[0].data = processedData9;
                avg = <?php echo $rowj[0]; ?>;
                StDev = <?php echo $rowj[1]; ?>;
                Aantalwaarden9 = <?php echo $rowj[2]; ?>;
                //Cp=(USL-LSL)/(6xstd.Dev) see.:https://www.easycalculation.com/statistics/learn-cp-cpk-calculator.php
                //Cpk = (USL-gemiddelde) / (3 x std.Dev) of (gemiddelde-LSL) / (3 x std.Dev)

                cpkl1 = (<?php echo $_cpkh10waarde; ?>-<?php echo $_cpkl10waarde; ?>)/(6*StDev);
                Cpk1High = (<?php echo $_cpkh10waarde; ?>-avg)/(3*StDev);
                Cpk1Low = (avg-<?php echo $_cpkl10waarde; ?>)/(3*StDev);

                chart9 = new Highcharts.Chart('container9',{
                    chart: {
                        zoomType: 'x',
                        type: 'line',
                        marginRight: 130,
                        marginBottom: 100,
                        backgroundColor:'azure'
                    },
                    rangeSelector: {
                        buttons: [{
                            text: '+',
                            events: {
                                click() {
                                    return false
                                }
                            }
                        },
                        {
                            text: '-',
                            events: {
                                click() {
                                    return false
                                }
                            }
                        }]
                    },
                    title: {
                        useHTML: true,
                            text: "Gemeten MFR waarde van PP 300R Grey Extrusie over de laatste "+(Aantalwaarden9)+" waarden.",

                         x: -20 //center
                    },
                    credits: {
                        enabled: false
                    },
                    subtitle: {text: 'Gem.='+avg.toFixed(2)+' Stdev='+StDev.toFixed(2)+' Cp='+cpkl1.toFixed(2)+' Cpk_High='+Cpk1High.toFixed(2)+' Cpk_Low='+Cpk1Low.toFixed(2)+'',x: -20},
                    xAxis: {
                        uniqueNames: false,
                        type: 'category',
                        title: {
                            text: 'Datum'
                        }
                    },
                    yAxis: {
                        "min":15,
                        "max":23,
                        title: {
                            text: 'MFR'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }],
                        plotLines: [{value: <?php echo $_cpkl10waarde; ?>,color: <?php echo $_color_min_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}},
                                    {value: <?php echo $_cpkh10waarde; ?>,color: <?php echo $_color_max_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}},
                                    {value: <?php echo $_cpkm10waarde; ?>,color: <?php echo $_color_guide_line; ?>,dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn'}},
                                    {value: avg.toFixed(2),color: <?php echo $_color_avg_line; ?>,dashStyle: 'spline',width: 2,label: {text: 'Avg'}},
                        ]
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>Meetwaarden</b><br/>'+ this.x +': '+ this.y;
                        }
                    },
                    legend: {layout: 'vertical',align: 'right',verticalAlign: 'top', x: -100,y: 0,floating: true,borderWidth: 0},
                    series: data,
                    plotOptions: {
                        line: {
                            dataLabels: {
                                enabled: true
                            }
                        }
                    },
                });
                chart9.legend.allItems[0].update({name:'MFR'});
            }, 1000);
        });```

Answer 1

因為您的category類型為 xAxis，所以您的類別名稱包含在point.key變量中。 所以，根據你的例子，你只需要參考this.key

tooltip: {
  formatter: function() {
      return '<b>Meetwaarden</b><br/>'+ this.key +': '+ this.y;
  }
},

簡化演示： https://jsfiddle.net/BlackLabel/87bousnL/

API 參考： https://api.highcharts.com/highcharts/tooltip.headerFormat