Highchart:带有箭头问题的半饼图

时间:2018-02-20 07:13:16

标签: javascript highcharts pie-chart

我正在使用高级图书馆在我的网站上制作图表。 面临问题:

  1. 在半饼图中显示箭头后面的行,请参阅屏幕截图。
  2. 无法更改颜色。
  3. 代码在js-fiddle中工作但不在我的网站中。 以下是代码,如果我错过了什么,请查看并告诉我。

    代码

    $(function () {
                            Highcharts.chart('container', {
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: 'Browser<br>shares<br>2015',
                align: 'center',
                verticalAlign: 'top',
                y: 40
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            pane: {
                center: ['50%', '75%'],
                size: '50%',
                startAngle: -90,
                endAngle: 90,
                background: {
                    borderWidth: 0,
                    backgroundColor: 'none',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },
            yAxis: [{
                lineWidth: 0,
                min: 0,
                max: 90,
                minorTickLength: 0,
                tickLength: 0,
                tickWidth: 0,
                labels: {
                    enabled: false
                },
                title: {
                    text: '', //'<div class="gaugeFooter">46% Rate</div>',
                    useHTML: true,
                    y: 80
                },
                /*plotBands: [{
                    from: 0,
                    to: 46,
                    color: 'pink',
                    innerRadius: '100%',
                    outerRadius: '0%'
                },{
                    from: 46,
                    to: 90,
                    color: 'tan',
                    innerRadius: '100%',
                    outerRadius: '0%'
                }],*/
                pane: 0,
    
            }],
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: true,
                        distance: -50,
                        style: {
                            fontWeight: 'bold',
                            color: 'white',
                            textShadow: '0px 1px 2px black'
                        }
                    },
                    startAngle: -90,
                    endAngle: 90,
                    center: ['50%', '75%']
                },
                gauge: {
                    dataLabels: {
                        enabled: false
                    },
                    dial: {
                        radius: '100%'
                    }
                }
            },
    
            series: [{
                type: 'pie',
                name: 'Browser share',
                innerSize: '50%',
                data: [{
                    name: 'Low',
                    y: 35,
                    color: 'Red' // Jane's color
                },
                {
                    name: 'Medium',
                    y: 30,
                    color: 'Yellow' // Jane's color
                },
                {
                    name: 'High',
                    y: 35,
                    color: 'Green' // Jane's color
                }                       
    
    
                ]
            },{
                type: 'gauge',
                data: [40],
                dial: {
                    rearLength: 0
                }
            }],
        });
    });
    

    enter image description here

    提前致谢。

0 个答案:

没有答案