如何在Highchart中为每个条形图指定特定名称（工具提示）

Question

如何在深入分析高图中为每个条形图提供具体的工具提示标题和子标题？
下图描述了我想要做的事情。时间将是当地时间，而不仅仅是一个酒吧，但我想在我的图表中的每个条形图中使用，甚至是向下钻取后的条形图。

这是我的图表中每个栏中应用的代码。

tooltip: {
    headerFormat: '<span style="font-size:11px">Time and Date</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.0f} </b>watt(s)<br/>'
},

请建议我怎么做。谢谢

Answer 1

您可以在formatter中使用tooltip功能，类似这样的功能：

tooltip: {
  formatter: function() {
    var date = Highcharts.dateFormat('%e - %m - %Y', new Date());
    var level = this.series.options._levelNumber;
    var minutes = (level == 1 ? 14 : 59);
    var from = this.point.name;
    var to = from.substring(0, 3) + (parseInt(from.substring(3, 5)) + minutes);
    var text = '<span style="font-size:11px">' + date + '</span><br>'  +
               '<span style="color:' + this.point.color + '">' +
               from + '-' + to +
               '</span>: <b>' + this.point.y + '</b> kWh<br/>'

    return text;
  }
},

检查此代码段：

＆＃13;

＆＃13;

Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
          drilldown: function() {
            var chart = this;
            chart.setTitle(null, {
              text: "Unit per 15 minutes"
            });
          },
          drillup: function() {
            var chart = this;
            chart.setTitle(null, {
              text: "Unit per hour"
            });
          }
        }
    },
    title: {
        text: '<b>Unit</b> of today [ ' + '<b>' +'Today'+ '</b>' + ' ]'
    },
    subtitle: {

        text: 'Unit per hour'
    },
    xAxis: {
      type: 'category',
        labels: {
          rotation: -45,
          align: 'right',
          style: {
            fontSize: '9px'
           }
        }
    },

    yAxis: {
        title: {
            text: 'Unit'
        }

    },

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: false,
                format: '{point.y:.1f}%'
            }
        }
    },

    colors: ['#e74c3c', '#3498db'],

    tooltip: {
       formatter: function() {
          var date = Highcharts.dateFormat('%e - %m - %Y', new Date());
          var level = this.series.options._levelNumber;
          var minutes = (level == 1 ? 14 : 59);
          var from = this.point.name;
          var to = from.substring(0, 3) + (parseInt(from.substring(3, 5)) + minutes);
          var text = '<span style="font-size:11px">' + date + '</span><br>'  +
                     '<span style="color:' + this.point.color + '">' +
                     from + '-' + to +
                     '</span>: <b>' + this.point.y + '</b> kWh<br/>'
          return text;
      }

    },

    series: [{
        name: 'Main',
        colorByPoint: true,
        data: [
          { name: '00:00', y: 15, drilldown: '00:00' },
          { name: '01:00', y: 12, drilldown: '01:00' },
          { name: '02:00', y: 22, drilldown: '02:00' },
          { name: '03:00', y: 32, drilldown: '03:00' },
          { name: '04:00', y: 24, drilldown: '04:00' },
          { name: '05:00', y: 55, drilldown: '05:00' },
          { name: '06:00', y: 14, drilldown: '06:00' },
          { name: '07:00', y: 23, drilldown: '07:00' },
          { name: '08:00', y: 20, drilldown: '08:00' },
          { name: '09:00', y: 44, drilldown: '09:00' },
          { name: '10:00', y: 55, drilldown: '10:00' },
          { name: '11:00', y: 33, drilldown: '11:00' },
          { name: '12:00', y: 11, drilldown: '12:00' },
          { name: '13:00', y: 23, drilldown: '13:00' },
          { name: '14:00', y: 24, drilldown: '14:00' },
          { name: '15:00', y: 28, drilldown: '15:00' },
          { name: '16:00', y: 39, drilldown: '16:00' },
          { name: '17:00', y: 52, drilldown: '17:00' },
          { name: '18:00', y: 12, drilldown: '18:00' },
          { name: '19:00', y: 25, drilldown: '19:00' },
          { name: '20:00', y: 35, drilldown: '20:00' },
          { name: '21:00', y: 24, drilldown: '21:00' },
          { name: '22:00', y: 25, drilldown: '22:00' },
          { name: '23:00', y: 33, drilldown: '23:00' }
        ]
    }],

    drilldown: {
        series: [
          { name: '00:00', id: '00:00', data: [ ['00:00', 11], ['00:15', 11], ['00:30', 11], ['00:45', 11]]},
          { name: '01:00', id: '01:00', data: [ ['01:00', 11], ['01:15', 11], ['01:30', 11], ['01:45', 11]]},
          { name: '02:00', id: '02:00', data: [ ['02:00', 11], ['02:15', 11], ['02:30', 11], ['02:45', 11]]},
          { name: '03:00', id: '03:00', data: [ ['03:00', 11], ['03:15', 11], ['03:30', 11], ['03:45', 11]]},
          { name: '04:00', id: '04:00', data: [ ['04:00', 11], ['04:15', 11], ['04:30', 11], ['04:45', 11]]},
          { name: '05:00', id: '05:00', data: [ ['05:00', 11], ['05:15', 11], ['05:30', 11], ['05:45', 11]]},
          { name: '06:00', id: '06:00', data: [ ['06:00', 11], ['06:15', 11], ['06:30', 11], ['06:45', 11]]},
          { name: '07:00', id: '07:00', data: [ ['07:00', 11], ['07:15', 11], ['07:30', 11], ['07:45', 11]]},
          { name: '08:00', id: '08:00', data: [ ['08:00', 11], ['08:15', 11], ['08:30', 11], ['08:45', 11]]},
          { name: '09:00', id: '09:00', data: [ ['09:00', 11], ['09:15', 11], ['09:30', 11], ['09:45', 11]]},
          { name: '10:00', id: '10:00', data: [ ['10:00', 11], ['10:15', 11], ['10:30', 11], ['10:45', 11]]},
          { name: '11:00', id: '11:00', data: [ ['11:00', 11], ['11:15', 11], ['11:30', 11], ['11:45', 11]]},
          { name: '12:00', id: '12:00', data: [ ['12:00', 11], ['12:15', 11], ['12:30', 11], ['12:45', 11]]},
          { name: '13:00', id: '13:00', data: [ ['13:00', 11], ['13:15', 11], ['13:30', 11], ['13:45', 11]]},
          { name: '14:00', id: '14:00', data: [ ['14:00', 11], ['14:15', 11], ['14:30', 11], ['14:45', 11]]},
          { name: '15:00', id: '15:00', data: [ ['15:00', 11], ['15:15', 11], ['15:30', 11], ['15:45', 11]]},
          { name: '16:00', id: '16:00', data: [ ['16:00', 11], ['16:15', 11], ['15:30', 11], ['15:45', 11]]},
          { name: '17:00', id: '17:00', data: [ ['17:00', 11], ['17:15', 11], ['17:30', 11], ['17:45', 11]]},
          { name: '18:00', id: '18:00', data: [ ['18:00', 11], ['18:15', 11], ['18:30', 11], ['18:45', 11]]},
          { name: '19:00', id: '19:00', data: [ ['19:00', 11], ['19:15', 11], ['19:30', 11], ['19:45', 11]]},
          { name: '20:00', id: '20:00', data: [ ['20:00', 11], ['20:15', 11], ['20:30', 11], ['20:45', 11]]},
          { name: '21:00', id: '21:00', data: [ ['21:00', 11], ['21:15', 11], ['21:30', 11], ['21:45', 11]]},
          { name: '22:00', id: '22:00', data: [ ['22:00', 11], ['22:15', 11], ['22:30', 11], ['22:45', 11]]},
          { name: '23:00', id: '23:00', data: [ ['23:00', 11], ['23:15', 11], ['23:30', 11], ['23:45', 11]]}
        ]
    },

    exporting: {
      buttons: {
        contextButtons: {
          enabled: false,
          menuItems: null
         }
      },
      
    enabled: false
    },

    credits: {
      enabled: false
    }
});

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

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

＆＃13;

＆＃13;

＆＃13;