ハイチャートの各バーの特定の名前（ツールチップ）への方法

ドリルダウンハイチャートの各バーの特定のツールチップタイトルとサブタイトルはどうすればよいですか？
以下の画像は、私がしたいことを説明しています。時間は現地時間で、現在は1つのバーだけでなく、現在の時間になりますが、グラフのすべてのバー、ドリルダウン後のバーでも使用したいと考えています。

ハイチャートの各バーの特定の名前（ツールチップ）への方法

これは、チャートのすべてのバーに適用されるコードです。

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

どうすればいいか教えてください。あなたはこのような何かが働くだろう、tooltipでformatter機能を使用することができますあなたの

出典

2017-04-22 Nothingnez

ありがとう：

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

Tあなたの説明のためにあなたをハンクします。できます：）。しかし、例えば00:15のような時刻の場合、ツールチップのタイトルは00:15 - 00:29になるでしょう。私にそれを試してみてください:) – Nothingnez

'this.point.name.replace（" 00 "、" 59 "）。replace（"：15 "、"：29 " ） '。より多くのシナリオが必要な場合は、そのロジックを関数に移動することをお勧めします。私が '：'を含んでいたので、 '15：00'に' 15 'を置き換えないことに注意してください。 – Gerry

私のグラフはドリルダウングラフですので、レベル1のときはコードがうまく動作します。バーをクリックするたびにレベル2にドリルダウンします。レベル2もレベル1と同じシリーズデータ名00.00があります。 replace（ "00"、 "59"）またはreplace（ "：00"、 "：59"）を使用すると、レベル1にも影響します。 [jsfiddle]（https://jsfiddle.net/na6ezefo/） – Nothingnez

ハイチャートの各バーの特定の名前（ツールチップ）への方法

答えて

関連する問題