2017-09-15 73 views
0

我有以下餅圖在淺綠色區域中進行了深入分析。所以如果你點擊那個綠色區域,另一個餅圖會打開。在第一個餅圖的每個部分的工具提示中,有一個文字說明了品牌,並且該文本在出現向下鑽取的餅圖時也出現在返回(返回到品牌)的按鈕中。換句話說,後退按鈕可以幫助觀衆回到第一張餅圖。 我的問題是如何擺脫文字品牌。我根本不需要那些文字。我只是想讓按鈕說回來,文字品牌沒有出現在工具提示中。謝謝你的幫助。Highcharts-如何修改鑽取餅圖中的工具提示文本

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>