使用CSS Gradients创建拾色器圆圈?

时间:2015-09-17 05:32:19

标签: jquery css highcharts

我试图在HighCharts中实现一个非功能性颜色选择器圈(只是视觉存在)。

我已经能够用纯色创建圆圈(JsFiddle:http://jsfiddle.net/amigoo/zwod86e1/

HTML:

<div id="container1" style="display:inline-block;"></div>

JS

$(function() {
        Highcharts.setOptions({
            colors: ['#8edce7', '#e8ebeb']
        });

        // Create the chart for completion
        var chart_completion = new Highcharts.Chart({
            chart: {
                renderTo: 'container1',
                type: 'pie',
                margin: [0,0,0,0],
                height: 100,
                width: 100

            },
            tooltip: {
                enabled: false,
            },
            plotOptions: {
                pie: {
                    slicedOffset: 0,
                    size: '100%',
                    dataLabels: {
                        enabled: false
                    }
                },
                series: noBorder
            }, 
            title: {
                text: 'In Prog.',
                align: 'center',
                verticalAlign: 'middle',
                style: {
                    fontSize: '9.5px'
                }

            },      
            credits: {
               enabled: false
            },
            series: [{
                name: 'Browsers',
                data: [["MSIE",10],[,2]],
                innerSize: '80%',
                showInLegend:false,
                dataLabels: {
                    enabled: false
                },
                states:{
                    hover: {
                        enabled: false
                    }
                },
                point : {
                    events: {
                        mouseOver: function(){
                           this.oldTitle = chart_completion.options.title.text;

                           chart_completion.setTitle({
                                text: 'New title '
                            });

                        },
                        mouseOut: function(){
                            chart_completion.setTitle({
                                text: this.oldTitle
                            });
                        }
                    }
                }
            }]
        });

然而,努力使普通颜色变得渐变,使它看起来像这样:

enter image description here

有什么想法吗?

0 个答案:

没有答案