Highcharts

Question

再次为我的天真道歉。我现在想在我的工具提示中添加一个后缀，以指示 % 湿度和 °C 温度。我从 ppotaczek（感谢）得到的结果经过一些小的修改是好的，但是当我尝试以各种方式添加 valueSuffix 时，它总是返回未定义，可能是由于多个系列（我将添加更多系列稍后将包括压力符号）。我试过向系列添加一个变量并使用 valueSuffix 但我无法正确使用。我对其余代码感到满意，但我会一直感谢您的建议。

Tooltip as it is - suffix undefined

希望我已经说清楚了。非常感谢

...

<?php $json_data = include ('database.php');
?> 
<!DOCTYPE HTML>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Line Graph</title>

    </head>
    <body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>


        <style type="text/css">
        #container {
            min-width: 310px;
            max-width: 800px;
            height:400px;
            margin: 0 auto
        }
        </style>

<div id="container"></div>


<script type="text/javascript">

var data = <?= $json_data?>

var series = [{
        name: "Temperature",
        valueSuffix: '°C',
        data: []

    },
    {
        name: "Humidity",
        valueSuffix: '%',
        data: [],
        yAxis: 1
    }
];
//alert(series[1].appendor);// from a previous attempt

data.forEach(function(dataEl) {
    series[0].data.push([
        new Date(dataEl.Timestamp).getTime(),
        Number(dataEl.temperature)
    ]);
    series[1].data.push([
        new Date(dataEl.Timestamp).getTime(),
        Number(dataEl.humidity)
    ]);
});

Highcharts.chart('container', {
     
    series: series,
    yAxis: [{
            title: {
                text: 'Temperature'
                
            }
            },
        {
            title: {
                text: 'Humidity'
            },
            opposite: true
        }
    ],
    title: {
      text: 'Temperature and Humidity',
      x: -20 //center
    },
    subtitle: {
      text: 'Source: The Caravan',
      x: -20
    },   
 tooltip: {
        formatter: function () {
            var suff = this.series.valueSuffix, heading = this.series.name
            return "<b>" + heading + "</b><br/>" + Highcharts.dateFormat('%a %d %b %H:%M.', this.x, true) + ":<br/>" + Highcharts.numberFormat(this.y, 0) + suff +" " ;
        },
        backgroundColor: 'rgba(0, 0, 0, .75)',
        borderWidth: 2,
        style: {
            color: '#CCCCCC'
        }
    },

 // fix for x-axxis from:  
   xAxis: {
    type: 'datetime',
    labels: {
      formatter: function() {
        return Highcharts.dateFormat('%a %d %b', this.value);
      }
    }
  },
 
});

</script>

</body>

</html>

...

这是从 Mysql 数据库中读取的 json_data 的一个块 - 它是动态的并且一直在变化：[{"Timestamp":"10:04 02 /01/21","temperature":"5","humidity":"66"},{"Timestamp":"10:19 02/01/21","temperature":"6","humidity" :"65"},{"时间戳":"10:35 02/01/21","温度":"6","湿度":"64"},{"时间戳":"10:50 02/ 01/21","temperature":"6","humidity":"64"},{"Timestamp":"11:06 02/01/21","temperature":"6","humidity": "64"},{"时间戳":"11:21 02/01/21","温度":"7","湿度":"63"},{"时间戳":"11:34 02/01 /21","temperature":"10","humidity":"66"},{"Timestamp":"04:21 02/01/21","temperature":"15","humidity":" 64"},{"时间戳":"04:36 02/01/21","温度":"16","湿度":"61"},{"时间戳":"04:51 02/01/ 21","temperature":"15","humidity":"59"},{"Timestamp":"05:07 02/01/21","temperature":"15","humidity":"60 "},{"时间戳":"05:22 02/01/21","温度":"14","湿度":"61"}]

Answer 1

没有valueSuffix 属性直接存入系列因为是自定义的，存入series.options.

    tooltip: {
        formatter: function() {
            var suff = this.series.options.valueSuffix,
                heading = this.series.name;

            return "<b>" + heading + "</b><br/>" + Highcharts.dateFormat('%a %d %b %H:%M.', this.x, true) + ":<br/>" + Highcharts.numberFormat(this.y, 0) + suff + " ";
        },
        ...
    }

现场演示： http://jsfiddle.net/BlackLabel/1se5cyd7/

Highcharts - 向多系列图表中的工具提示添加后缀

Highcharts - Adding a suffix to a tooltip in a multi-series chart

javascript

mysql

tooltip