删除饼图大纲文本

时间:2017-06-02 11:17:17

标签: javascript charts highcharts

我已从高级图表下载饼图下载,但我有一些问题,我想删除饼图中列出的文字,任何人都可以帮助我,让我知道这是怎么可能的

var colors = Highcharts.getOptions().colors,
    categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
    data = [{
        //y: 56.33,
        color: colors[0],
        drilldown: {
            name: 'MSIE versions',
            categories: ['General Public (Local)'],
            data: [<?php echo $company_details[0]['individual']; ?>],
            color: colors[0]
        }
    }, {
        //y: 10.38,
        color: colors[1],
        drilldown: {
            name: 'Firefox versions',
            categories: ['Foreign (Ind. & Inst.)'],
            data: [<?php echo $company_details[0]['foreign']; ?>],
            color: colors[1]
        }
    }, {
        //y: 24.03,
        color: colors[2],
        drilldown: {
            name: 'Chrome versions',
            categories: ['Institutional'],
            data: [<?php echo $company_details[0]['institutions']; ?>],
            color: colors[2]
        }
    }, {
        //y: 4.77,
        color: colors[3],
        drilldown: {
            name: 'Safari versions',
            categories: ['Directors / Spouses'],
            data: [<?php echo $sum_all_details; ?>],
            color: colors[3]
        }
    }, {
       // y: 0.2,
        color: colors[5],
        drilldown: {
            name: 'Proprietary or Undetectable',
            categories: [],
            data: [],
            color: colors[5]
        }
    }],
    browserData = [],
    versionsData = [],
    i,
    j,
    dataLen = data.length,
    drillDataLen,
    brightness;

// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
    name: categories[i],
    y: data[i].y,
    color: data[i].color
});

// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
    brightness = 0.2 - (j / drillDataLen) / 5;
    versionsData.push({
        name: data[i].drilldown.categories[j],
        y: data[i].drilldown.data[j],
        color: Highcharts.Color(data[i].color).brighten(brightness).get()
    });
}
}

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%']
        },
        dataLabels: {
          enabled: false
        }
    },
    tooltip: {
        valueSuffix: '%'
    },
    series: [{
        name: 'Browsers',
        data: browserData,
        size: '30%',
        dataLabels: {
            formatter: function () {
                return this.y > 5 ? this.point.name : null;
            },
            color: '#ffffff',
            distance: -30
        }
    }, {
        name: 'Versions',
        data: versionsData,
        size: '90%',
        innerSize: '40%',
        dataLabels: {
            formatter: function () {
                // display only if larger than 1
                return this.y > 1 ? '<b>' + this.point.name + ':</b> ' +
                    this.y + '%' : null;
            }
        },
        id: 'versions'
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 250
            },
            chartOptions: {
                series: [{
                    id: 'versions',
                    dataLabels: {
                        enabled: false
                    }
                }]
            }
        }]
    }
    });

我无法弄清楚如何删除在轮廓区域中显示的文本文本在图表区域中可见任何人都可以帮助我 enter image description here

1 个答案:

答案 0 :(得分:6)

您已在plotOptions下放置了dataLabels属性,但它应位于pie对象下。 你的代码

plotOptions: {
    pie: {
        shadow: false,
        center: ['50%', '50%']
    },
    dataLabels: {
      enabled: false
    }
}

将dataLabels放在plotOptions饼图下面,示例代码如下:

plotOptions: {
    pie: {
        shadow: false,
        center: ['50%', '50%']
        dataLabels: {
            enabled: false
        }
    }
}

jsFiddle链接供参考。