2017-09-15 13 views
0

ライトグリーン領域にドリルダウンする次の円グラフがあります。その緑色の領域をクリックすると、別の円グラフが開きます。最初の円グラフの各セクションのツールチップには、Brandsというテキストがあり、このテキストは、ドリルダウンの円グラフが表示されたら戻るボタン(Back to Brandsと表示されます)にも表示されます。言い換えると、戻るボタンは、視聴者が最初の円グラフに戻るのを助けます。 私の質問は、ブランドブランドを取り除く方法です。私はそのテキストはまったく必要ありません。ボタンをBackにして、ブランドのテキストがツールチップに表示されないようにするだけです。ご協力いただきありがとうございます。ハイチャート - ドリルダウン円グラフのツールヒントテキストを変更する方法

Highcharts.chart('recoveryGraf', { 
 
    chart: { 
 
     type: 'pie' 
 
    }, 
 
    title: { 
 
     text: '' 
 
    }, 
 
    plotOptions: { 
 
     series: { 
 
      dataLabels: { 
 
       enabled: true, 
 
       format: '{point.name}: {point.y:.1f}%' 
 
      } 
 
     } 
 
    }, 
 

 
    tooltip: { 
 
     headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
 
     pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' 
 
    }, 
 
    series: [{ 
 
     name: 'Brands', 
 
     colorByPoint: true, 
 
     colors: ['#005eb8','#56b6cc','#8bc540'], 
 
     data: [{ 
 
      name: 'Potential for further recovery', 
 
      y: 6, 
 
      drilldown: null 
 
     }, { 
 
      name: 'Non-recoverable<br>(e.g. tissue,wallpaper,etc)', 
 
      y: 22, 
 
      drilldown: null 
 
     }, { 
 
      name: 'Recycled', 
 
      y: 72, 
 
      drilldown: 'Recycleds' 
 
     }] 
 
    }], 
 
    drilldown: { 
 
     series: [{ 
 
      name: 'Recycleds', 
 
      id: 'Recycleds', 
 
      colors: ['#57a133','#8bc540'], 
 
      data: [ 
 
       ['Exported', 16], 
 
       ['Used Europe', 84] 
 
      ] 
 
     }] 
 
    } 
 
});
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 
<div id="recoveryGraf"></div>

答えて

1

ボタンにチェックdrilldown.drillUpButtonと設定された所望のメッセージ

Highcharts.setOptions({ 
 
    lang: { 
 
    drillUpText: '<< Back' 
 
    } 
 
}); 
 

 
Highcharts.chart('recoveryGraf', { 
 
    chart: { 
 
    type: 'pie' 
 
    }, 
 
    title: { 
 
    text: '' 
 
    }, 
 
    plotOptions: { 
 
    series: { 
 
     dataLabels: { 
 
     enabled: true, 
 
     format: '{point.name}: {point.y:.1f}%' 
 
     } 
 
    } 
 
    }, 
 

 
    tooltip: { 
 
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>', 
 
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' 
 
    }, 
 
    series: [{ 
 
    name: 'Brands', 
 
    colorByPoint: true, 
 
    colors: ['#005eb8', '#56b6cc', '#8bc540'], 
 
    data: [{ 
 
     name: 'Potential for further recovery', 
 
     y: 6, 
 
     drilldown: null 
 
    }, { 
 
     name: 'Non-recoverable<br>(e.g. tissue,wallpaper,etc)', 
 
     y: 22, 
 
     drilldown: null 
 
    }, { 
 
     name: 'Recycled', 
 
     y: 72, 
 
     drilldown: 'Recycleds' 
 
    }] 
 
    }], 
 
    drilldown: { 
 
    series: [{ 
 
     name: 'Recycleds', 
 
     id: 'Recycleds', 
 
     colors: ['#57a133', '#8bc540'], 
 
     data: [ 
 
     ['Exported', 16], 
 
     ['Used Europe', 84] 
 
     ] 
 
    }] 
 
    } 
 
});
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 
 
<div id="recoveryGraf"></div>

関連する問題