文章/答案/技术大牛

发布

社区首页 >问答首页 >Highcharts在饼图中放置样式和更改样式的位置

问Highcharts在饼图中放置样式和更改样式的位置
EN

Stack Overflow用户

提问于 2013-02-05 00:59:49

回答 1查看 4.4K关注 0票数 2

这里有一个Highcharts饼图：http://jsfiddle.net/6PbbR/52/

$(function () {

    var chart;
    $(document).ready(function() {

      // Radialize the colors
    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
        return {
            radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
            stops: [
                [0, color]
            ]
        };
    });

    // Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                shadow: true,
                    },
            tooltip: {
                enabled: false
            },
            title: {
                text: ""
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    size:'68%',
                    cursor: 'pointer',
                    shadow: true,
                    dataLabels: {
                        enabled: true,
                        distance: -40,
                        style: {
                        width: '100px'
                    },
                        color: '#fff',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b style="font-family:arial;font-size:10px;font-weight:bold">'+ this.point.name +'</b> ';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                 name: 'Income Investments',
                data: [
                     ['FLOATING RATE FUNDS',   16.667],
                    {
                        name: 'Corporate Capital Trust',
                        y: 16.667,
                        sliced: true,
                        selected: true
                    },                                     
                    ['BONDS',   16.667],
                    ['ANNUITIES',       16.667],
                    ['REITs',    16.667],
                    ['CDs',     16.667]
                ]
            }],

        colors: [
                     '#83a3c6',
                      '#98012e', 
                    '#19699b', 
                    '#ae9e8e', 
                    '#5283b0', 
                    '#958370'
                      ],
        });
    });

});

两个问题：

1)我对我在plotOptions{pie{格式化程序中插入内联样式的方式不满意。哪里有更好的地方使用API来完成这项工作，而不是使用暴力强制内联风格？

2)我想要更改红色楔形的字体系列(并可能调整其位置/边距)。做这件事的最好方法是什么？

编辑:理想情况下，我可以在不超出上述功能的情况下完成我的需求。是否可以使用API将样式仅附加到一个数据点？

styles

highcharts

pie-chart

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-05 03:14:57

它是一个简单的html，所以您可以添加一个class或id，然后使用css设置样式。

formatter: function() {
    return '<b id="myTooltipId">'+ this.point.name +'</b> ';
}

css

#myTooltipId {
    font-family: arial;
    font-size: 10px;
    font-weight:bold
}

更新

在格式化程序中，您可以使用this获取切片属性。

所以你只需要检查切片是否是你想要的。

formatter: function() {
    // key is the slice name
    if (this.key == 'CDs') {
        return '<b id="myTooltipId">'+ this.point.name +'</b> ';
    } else {
        return this.value;
    }
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/14691574

复制

相似问题

问Highcharts在饼图中放置样式和更改样式的位置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Highcharts在饼图中放置样式和更改样式的位置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Highcharts在饼图中放置样式和更改样式的位置
EN