如何具體名稱（提示）在Highchart

各條我怎樣才能具體提示標題和副標題在深入分析Highchart各條？
下圖描述了我想要做的事情。時間將是當地時間，而不僅僅是一個酒吧，但我想在我的圖表中的每個酒吧中使用，即使是在鑽取後的酒吧。

如何具體名稱（提示）在Highchart

這是在我的圖表每欄應用的代碼。

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/>' 
},

請告訴我該怎麼做。謝謝

來源

2017-04-22 Nothingnez

可以在tooltip使用formatter功能，像這樣的工作：

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; 
    } 
},

檢查這個片段：

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

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

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

來源

2017-04-22 18:31:30 Gerry

ŧ要求你的描述。有用：）。但是如果00:15的時候，工具提示標題將會是00:15 - 00:29。推薦我，然後我會嘗試:) – Nothingnez

只需添加另一個替換爲的情況下，這樣的：'this.point.name.replace（「00」，「59」）取代（「15」，「29」）'。如果你需要更多的場景，我會建議將這個邏輯移到一個函數中。注意我包含'：'，所以你不會在'15：00'中替換'15'。 – Gerry

監守我的圖是向下鑽取圖表的話，你的代碼工作的時候還爲1級。每當我在酒吧點擊，它會鑽到2級，問題是2級也有一系列的數據名稱00.00相同水平1。如果我使用替換（「00」，「59」）或替換（「：00」，「：59」），它也會影響到1級。 [見的jsfiddle（https://jsfiddle.net/na6ezefo/） – Nothingnez

如何具體名稱（提示）在Highchart

回答

相關問題