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

用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]
          }]
      });

显示效果:

highcharts多条数据线设置不同的数据单位_第1张图片

此时应将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 + '%';
                }
              }
          }]
      });
highcharts多条数据线设置不同的数据单位_第2张图片


你可能感兴趣的:(highcharts)