Highcharts - 如何更改显示数据和删除鼠标悬停?

时间:2016-12-14 08:38:05

标签: javascript jquery highcharts

我的页面上有一张Highcharts饼图,工作正常  我想要做的是删除饼图鼠标悬停时显示的值,而是使用dataLabels(?)静态显示值。

我对JS并不擅长,也不知道从哪里开始。
 请参阅下面的图片以获得解释。

$(function() {
    $('#total').highcharts({
      credits: {
        enabled: false
      },
      data: {
        table: document.getElementById('datatable_total'),
        switchRowsAndColumns: true,
        endRow: 1
      },
      chart: {
        type: 'pie'
      },
      title: {
        text: ''
      },
      yAxis: {
        allowDecimals: false,
        title: {
          text: 'Units'
        }
      },
      tooltip: {
        formatter: function() {
          return '<b>' + this.series.name + '</b><br/>' +
            this.point.y + ' ' + this.point.name.toLowerCase();
        }
      },
      navigation: {
        buttonOptions: {
          verticalAlign: 'bottom',
          y: -20
        }
      }
    });
  });

enter image description here

1 个答案:

答案 0 :(得分:1)

$(function () {
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: {point.y}'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b> <br>{point.y}</br>',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            colorByPoint: true,
            data: [{
                name: 'Europe',
                y: 50
            }, {
                name: 'Africa',
                y: 25
            }, {
                name: 'Australia',
                y: 18
            }, {
                name: 'US',
                y: 7
            }]
        }]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>