HighCharts-如何在Drilldown Pip Chart中修改工具提示文本



我有以下饼图,该饼图在浅绿色区域中有钻取。因此,如果您单击该绿色区域,则另一个饼图将打开。在第一个piechart的每个部分的工具提示中,有一个文本说品牌,一旦出现钻取饼图,该文本也会出现在按钮中以返回的按钮(回到品牌)。换句话说,后退按钮可以帮助观看者返回第一个饼图。我的问题是如何摆脱文字品牌。我根本不需要那个文字。我只想让按钮回头说,并且文本品牌不会出现在工具提示中。感谢您的帮助。

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>

检查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>

最新更新