Wie erhalte ich Datum und Uhrzeit im Punkthöhendiagramm?

Question

Ich zeichne große Diagramme auf die Seite. Das funktioniert großartig, aber ich habe ein kleines Problem. Es scheint mir, dass ich Datum und Uhrzeit nicht erhalte, wenn ich mit der Maus darüber fahre.

So sieht mein JSON aus:

[{"Messwert":Messwert,Datum:Datum,Daten:["9/5/2022",14.6,"9/5/2022" ,14.8,"6 -9-2022",15.948,"2022/9/6",17.112,"2022/9/6",

Mein Diagramm sieht so aus:

Sie sehen die Sprechblase links, sie zeigt die Zahl 0: 14,6.14,6 ist der Wert, was in Ordnung ist, aber 0 ist eine Zahl für diesen Wert, wie ein anderer Punkt, was

Aber wie zeige ich das Datum und die Uhrzeit an, zu der die Zahl in der Sprechblase gehört?

我的图表代码是这样的：

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

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

                data[0].data = verarbeitetData9;
                avg = <?php echo $rowj[0]; ?>;
                StDev = <?php echo $rowj[1]; ?>;
                Aantalwaarden9 = <?php echo $rowj[2]; ?>;
                //Cp=(USL-LSL)/(6xstd.Dev) siehe: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',{
                    Diagramm: {
                        zoomType: 'x',
                        Typ: 'Linie',
                        marginRight: 130,
                        marginBottom: 100,
                        Hintergrundfarbe:'azurblau'
                    },
                    rangeSelector: {
                        Tasten: [{
                            Text: '+',
                            Veranstaltungen: {
                                klicken() {
                                    falsch zurückgeben
                                }
                            }
                        },
                        {
                            Text: '-',
                            Veranstaltungen: {
                                klicken() {
                                    falsch zurückgeben
                                }
                            }
                        }]
                    },
                    Titel: {
                        useHTML: wahr,
                            Text: "Gemeten MFR waarde van PP 300R Grey Extrusie over the laatste "+(Aantalwaarden9)+" waarden.'',

                         x: -20 //Mitte
                    },
                    Credits: {
                        aktiviert: falsch
                    },
                    Untertitel: {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},
                    xAchse: {
                        uniqueNames: false,
                        Typ: 'Kategorie',
                        Titel: {
                            Text: 'Datum'
                        }
                    },
                    yAchse: {
                        "min":15,
                        "max":23,
                        Titel: {
                            Text: 'MFR'
                        },
                        Handlungsstränge: [{
                            Wert: 0,
                            Breite: 1,
                            Farbe: '#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: {
                        Formatierer: function() {
                            return '<b>Meetwaarden</b><br/>'+ this.x +': '+ this.y;
                        }
                    },
                    Legende: {layout: 'vertical',align: 'right',verticalAlign: 'top', x: -100,y: 0,floating: true,borderWidth: 0},
                    Serie: Daten,
                    plotOptions: {
                        Linie: {
                            Datenaufkleber: {
                                aktiviert: wahr
                            }
                        }
                    },
                });
                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