如何获取点高图表中的日期和时间?
P粉848442185
P粉848442185 2023-08-31 23:02:00
[PHP讨论组]
<p>我在页面上绘制高图表。 这很好用,但我有一个小问题,在我看来,当我将鼠标悬停在其上时,我没有得到日期和时间。</p> <p>这就是我的 json 的样子:</p> <p><code>[{"测量值":"测量值","日期":"日期","数据":["9/5/2022",14.6,"9/5/2022",14.8,"6 -9-2022",15.948,"2022/9/6",17.112,"2022/9/6",</code></p> <p>我的图表看起来像这样:</p> <p>你看到左边的气球,它显示数字0:14.6。 14.6 是值,这很好,但 0 是该值的数字,例如另一个点,给出 </p> <p>但是我如何显示气球中该数字所属的日期和时间?</p> <p>我的图表代码是这样的:</p> <pre class="brush:php;toolbar:false;">$.getJSON(&quot;mfrmetingen300RG.json&quot;, function(data) { const processedData9 = []; for (let a = 0; a &lt; data[0].data.length; a += 2) { processedData9.push([data[0].data[a], data[0].data[a + 1]]); } data[0].data = processedData9; avg = &lt;?php echo $rowj[0]; ?&gt;; StDev = &lt;?php echo $rowj[1]; ?&gt;; Aantalwaarden9 = &lt;?php echo $rowj[2]; ?&gt;; //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 = (&lt;?php echo $_cpkh10waarde; ?&gt;-&lt;?php echo $_cpkl10waarde; ?&gt;)/(6*StDev); Cpk1High = (&lt;?php echo $_cpkh10waarde; ?&gt;-avg)/(3*StDev); Cpk1Low = (avg-&lt;?php echo $_cpkl10waarde; ?&gt;)/(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: &quot;Gemeten MFR waarde van PP 300R Grey Extrusie over de laatste &quot;+(Aantalwaarden9)+&quot; waarden.&quot;, 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: { &quot;min&quot;:15, &quot;max&quot;:23, title: { text: 'MFR' }, plotLines: [{ value: 0, width: 1, color: '#808080' }], plotLines: [{value: &lt;?php echo $_cpkl10waarde; ?&gt;,color: &lt;?php echo $_color_min_line; ?&gt;,dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}}, {value: &lt;?php echo $_cpkh10waarde; ?&gt;,color: &lt;?php echo $_color_max_line; ?&gt;,dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}}, {value: &lt;?php echo $_cpkm10waarde; ?&gt;,color: &lt;?php echo $_color_guide_line; ?&gt;,dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn'}}, {value: avg.toFixed(2),color: &lt;?php echo $_color_avg_line; ?&gt;,dashStyle: 'spline',width: 2,label: {text: 'Avg'}}, ] }, tooltip: { formatter: function() { return '&lt;b&gt;Meetwaarden&lt;/b&gt;&lt;br/&gt;'+ 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); });```</pre></p>
P粉848442185
P粉848442185

全部回复(1)
P粉026665919

因为您有 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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号