活动量规,HighCharts中的线性渐变

时间:2016-12-05 20:07:21

标签: jquery android-activity highcharts gradient gauge

我试图在活动量表的窗格中放置一个线性渐变,但不幸的是,它没有给出所需的结果。我一直在使用High Chart线性渐变文档,但它在这方面不起作用。任何人都可以建议我如何将图表的窗格颜色从实体更改为渐变,该渐变的百分比会发生变化。

$(function () {

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'solidgauge'
        },

        pane: {
            startAngle: -150,
            endAngle: 150
        },


        yAxis: {
            min: 0,
            max: 100,
            plotBands: [{ // mark the weekend
                color: {
                    linearGradient: [300, 300, 0, 0],
                    stops: [
                        [0, 'rgb(255, 255, 255)'],
                        [1, 'rgb(150, 200, 155)']
                    ]
                },
                from: 0,
                to: 100
            }],
            tickPositions: [],
        },

    pane: {
                startAngle: 270,
                endAngle: 540,
                background: [{ 
                    outerRadius: '0%',
                    innerRadius: '70%',
                    backgroundColor: {
                    linearGradient: [300, 100, 0, 0],
                    stops: [
                        [0, 'rgb(255, 255, 255)'],
                        [1, 'rgb(150, 200, 155)']
                    ]

                },
                    borderWidth: 0
                }]
            },


        plotOptions: {
            gauge: {
                dial: {
                    radius: '100%',
                    backgroundColor: 'silver',
                    borderColor: 'black',
                    borderWidth: 1,
                    baseWidth: 10,
                    topWidth: 1,
                    baseLength: '90%', // of radius
                    rearLength: '50%'
                }
            }
        },


        series: [{
            data: [80]
        }]

    });
});

这是一个JSFiddle:

http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-activity/

0 个答案:

没有答案