Question

我想为每个饼图的切片使用背景图像。在High Charts中这可能吗？我找不到为每个切片指定背景图像的选项。这是我放在一起的一个简单的小提琴：http://jsfiddle.net/3KyeL/（只是把它放在这里，以防它让那些知道该怎么做的人生活更轻松）：

$(function () {
    $('#container').highcharts({
        credits: {
            enabled: false
        },
        title: {
            align: 'center',
            text: 'The Foo Bar',
            style: {
                color: '#9EA7B6'
            },
            verticalAlign: 'bottom',
            y: 15 // TODO: compute this
        },
        tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    distance: -100,
                    enabled: true,
                    color: '#FFFFFF',
                    format: '<strong>{point.name}</strong>: {point.percentage:.1f} %'
                },
                center: ['50%', '50%']
            }
        },
        series: [{
            data: [{
                name: 'Foo',
                y: 25
            }, {
                name: 'Bar',
                y: 50
            }, {
                name: 'Foobar',
                y: 25
            }],
            type: 'pie'
        }]
    });
});

Answer 1

尝试使用模式插件：http://www.highcharts.com/plugin-registry/single/9/Pattern-Fill

例如：http://jsfiddle.net/kVwGn/

<script src="https://rawgithub.com/highslide-software/pattern-fill/master/pattern-fill.js"></script>

... 

series: [{
    type: 'pie',
    data: [{
        y: 35,
        color: {
            pattern: 'http://highcharts.com/demo/gfx/pattern1.png',
            width: 6,
            height: 6
        }
    }, {
        y: 15,
        color: {
            pattern: 'http://highcharts.com/demo/gfx/pattern2.png',
            width: 6,
            height: 6,
            // VML only:
            color1: 'red',
            color2: 'yellow'
        }
    }]
}]

HighCharts：饼图需要背景图像

1 个答案: