highcharts多条数据线设置不同的数据单位

最新推荐文章于 2023-12-19 15:11:35 发布

原创最新推荐文章于 2023-12-19 15:11:35 发布 · 4.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#highcharts

highcharts 专栏收录该内容

1 篇文章

订阅专栏

在使用Highcharts展示数据时，遇到不同数据线单位不一致的问题。常规设置会导致所有数据单位相同。解决方法是将tooltip和formatter属性分别应用于每个数据系列，以定制各自的单位显示，确保鼠标悬浮提示和数据显示的标签正确反映出各自的数据单位。

用highcharts显示数据时，会有不同数据的单位不一样的问题。如下设置数据单位时会把所有数据的单位（标签）设置成一样的：

$('#charts').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: "传感器数据"
        },
        tooltip: {
          valueSuffix: '°C'
        },
        plotOptions:{
          column:{
            dataLabels:{
              enabled:true, //是否显示数据标签
              formatter: function() {
                return this.y + '°C';
              }
            }
          }
        },
        subtitle: {
            text: null,
        },
        xAxis: {
          categories: [1,2,3,4]
        },
        yAxis: {
            title: {
                text: '值'
            }
        },
        series: [{
            name: '温度',
            data: [23,21,24,20]
          },{
              name: '湿度',
              data: [32,40,45,33]
          }]
      });</span>

显示效果:

此时应将tooltip,formatter（其中tooltip用于鼠标悬浮显示的标签，formatter用于显示出来的数据的标签）设置到每个数据项中:

$('#charts').highcharts({
          chart: {
              type: 'column'
          },
          title: {
              text: "传感器数据"
          },
          plotOptions:{
            column:{
              dataLabels:{
                enabled:true //是否显示数据标签
              }
            }
          },
          subtitle: {
              text: null,
          },
          xAxis: {
              //categories: sensorUnit
            categories: [1,2,3,4]
          },
          yAxis: {
              title: {
                  text: '值'
              }
          },
          series: [{
              name: '温度',
              data: [23,21,24,20],
              tooltip: {
                valueSuffix: '°C'
              },
              dataLabels:{
                enabled:true, //是否显示数据标签
                formatter: function() {
                  return this.y + '°C';
                }
              }
          },{
              name: '湿度',
              data: [32,40,45,33],
              tooltip: {
                valueSuffix: '%'
              },
              dataLabels:{
                enabled:true, //是否显示数据标签
                formatter: function() {
                  return this.y + '%';
                }
              }
          }]
      });</span>