在HighCharts中看不到最小的馅饼

时间:2013-12-11 13:20:24

标签: javascript highcharts

如何自定义以使最小的饼图可见?

从这里可以看到Youtube:http://d.pr/i/nxeP

这是我的代码(我的抓取器在RAILS中):

$(function () {
    //for donut
    var data_series = <%= raw get_all_identities(@user) %> ;
    var getColor ={
        facebook: "#3d599b",
        twitter: "#00abee",
        instagram: "#736c59",
        soundcloud: "#fa3d00",
        youtube: "#d43c3b",
        tumblr: "#3d5a71",
        vine: "#00b589",
        foursquare: "#0abadf",
        linkedin: "#0abadf",
        vimeo: "#1ab7ea",
        fivehundredpx: "#000000",
        wordpress: "#257ba0",
        rdio: "#028ed4",
        behance: "#000000",
        flickr: "#ff0084"
    };
    $('#user_follower_chart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: '<b>{point.percentage:.2f}%</b>'
        },
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: false,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.2f} %'
                },
                startAngle: -90,
                endAngle: 0
            }
        },
        series: [{
            type: 'pie',
            name: 'Followers By Network',
            allowPointSelect: true,
            innerSize: '50%',
            data: []
        }]
    });
    var follower_chart, n, i, len;

    for (i = 0, len = data_series.length; i < len; i++) {
        n = data_series[i];
        if (n[1] !== 0) {
            follower_chart = $("#user_follower_chart").highcharts();
            follower_chart.series[0].addPoint({
                name: n[0],
                y: n[1],
                color: getColor[n[2]]
            });
        }
    }

2 个答案:

答案 0 :(得分:0)

红色切片可见,并且看起来适当缩放。

我不确定你期望看到0.2%的切片......

我建议两件事:

1)设置borderWidth 0,切片会更清晰。

2)无论如何这应该是一个条形图....如果你把它作为条形图,你可以设置minPointLength属性,以便小数据点仍然明显。

example: http://jsfiddle.net/jlbriggs/4FxYg/

答案 1 :(得分:0)

您也可以尝试使用innerSize参数

http://api.highcharts.com/highcharts#plotOptions.pie.innerSize