Question

有人可以告诉我为什么这张图表在钻取中正确呈现？代码包装了arc3d。我提供了代码以及JFiddle以供参考。当您单击图形时，它会完美地向下钻取，但在向上钻取时图形无法正确渲染。它保持钻孔切片的颜色。

（http://jsfiddle.net/subhasispatra/np0bn3ps/）

$(function () {
Highcharts.setOptions({
    lang: {
        drillUpText: '<Back'
    }
});
Highcharts.wrap(Highcharts.SVGRenderer.prototype, 'arc3d', function (proceed) {
    var result = proceed.apply(this, [].slice.call(arguments, 1));
    result.fadeIn = result.show;
    return result;
});

$('#container').highcharts({
    "plotOptions": {
        "pie": {
            "point": {
                "events": {
                    "click": function () {
                        if (this.options != undefined && this.options != null && this.options.url != null && this.options.url.length > 0) location.href = this.options.url;
                        else return;
                    }
                }
            },
                "dataLabels": {
                "enabled": true,
                    "style": {
                    "fontWeight": "bold",
                        "fontFamily": "Arial",
                        "fontSize": "10"
                },
                    "color": "#000000"
            },
                "shadow": true,
                "curson": "pointer",
                "depth": 30,
                "allowPointSelection": true,
                "showInLegend": true
        }
    },
        "drilldown": {
        "series": [{
            "id": "Draft",
                "data": [{
                "name": "15-21 DAYS",
                "url": "http://www.google.com",
                "y": 1
            }, {
                "name": "22-30 DAYS",
                "url": "http://www.google.com",
                "y": 1
            }]
        }, {
            "id": "Canceled",
                "data": [{
                "name": "15-21 DAYS",
                "url": "http://www.google.com",
                "y": 0
            }, {
                "name": "22-30 DAYS",
                "url": "http://www.google.com",
                "y": 1
            }]
        }],
            "drillUpButton": {
            "relativeTo": "spacingBox",
                "theme": {
                "style": {
                    "fontSize": "7pt"
                }
            },
                "y": 0,
                "x": 0
        }
    },
        "series": [{
        "name": "SERIES",
            "data": [{
            "drilldown": "Draft",
            "name": "Draft",
            "y": 2
        }, {
            "drilldown": "Canceled",
            "name": "Canceled",
            "y": 1
        }]
    }],
        "yAxis": {
        "title": {
            "style": {
                "color": "#000000",
                    "fontSize": "10"
            }
        },
            "labels": {
            "style": {
                "fontWeight": "normal",
                    "color": "#000000",
                    "fontFamily": "Arial",
                    "fontSize": "10"
            }
        }
    },
        "title": {
        "text": "Orders created in last 30 days"
    },
        "legend": {
        "itemStyle": {
            "fontWeight": "normal",
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": "10"
        },
            "layout": "vertical",
            "align": "left",
            "verticalAlign": "middle"
    },
        "chart": {
        "renderTo": "container",
            "options3d": {
            "enabled": "true",
                "alpha": 40,
                "beta": 0,
                "depth": 40
        },
            "backgroundColor": "rgba(255, 255, 255, 0.1)",
            "type": "pie"
    },
        "credits": {
        "enabled": false
    },
        "xAxis": {
        "title": {
            "style": {
                "color": "#000000",
                    "fontSize": "10"
            }
        },
            "labels": {
            "style": {
                "fontWeight": "normal",
                    "color": "#000000",
                    "fontFamily": "Arial",
                    "fontSize": "10"
            }
        }
    }
});

}）;

Answer 1

问题是由于3D渲染造成的。禁用3D选项，它可以正常工作。

馅饼中的HighCharts向下钻取问题

1 个答案: