Question

使用HighCharts库创建solidgauge图表时遇到一些问题。

我希望每个系列的宽度都相等，而且它们的背景却无法正确理解innerRadius，outerRadius，数据半径和窗格背景。

任何容器宽度都应灵活。

JS：

function buildChartOptions(series)
    {
       var nextRadius = 50, dataRadiusDiff = 25, nextBgInnerRadius = 38, bgRadiusDiff = 24;
        this.options = {
            chart: {},
            title: {},
            tooltip: {},
            pane: {},
            yAxis: {},
            plotOptions: {},
            series: {},
        };

        this.options.chart = {
            type: 'solidgauge',
            marginTop: 50
        };

        this.options.title = {
            text: null,
            style: {
                fontSize: '24px',
            }
        };

        this.options.tooltip = {
            borderWidth: 0,
            backgroundColor: 'none',
            shadow: false,
            style: {
                fontSize: '12px'
            },
            pointFormat: '{series.name}<br><span style="padding:10px;font-size:2em; color: {point.color}; font-weight: bold">{point.y} %</span>',
            positioner: function (labelWidth, labelHeight) {
                return {
                    x: 200 - labelWidth / 2,
                    y: 180
                };
            }
        };

        var chartWidth = (100-(series.length * 8 )),
        borderWidth = (100 - 11.02 * series.length);
        chartWidth = chartWidth < 30 ? 35 : chartWidth;
        borderWidth = borderWidth < 10 ? 15: borderWidth;

        borderWidth = 34;

        console.log('chart ', chartWidth, 'border ', borderWidth);

        this.options.pane = {
            startAngle: -90,
            endAngle: 90,
            size: Math.abs(chartWidth) + '%',
            background: []
        };

        this.options.yAxis = {};

        this.options.plotOptions = {
            solidgauge: {
                borderWidth: borderWidth + 'px',
                dataLabels: {
                    enabled: false
                },
                linecap: 'square',
                stickyTracking: true
            }
        };

        this.options.series = [];

        for(var i=0; i<series.length; i++)
        {
            this.options.series.push({
                name: series[i].name,
                borderColor: Highcharts.getOptions().colors[i],
                data:[{
                    color: Highcharts.getOptions().colors[i],
                    radius: nextRadius+'%',
                    innerRadius: nextRadius+'%',
                    y: (i*10)+20
               }]
            });


            nextRadius += dataRadiusDiff;

            this.options.pane.background.push({
                outerRadius: parseInt(nextBgInnerRadius + bgRadiusDiff) + '%',
                innerRadius: nextBgInnerRadius+'%',
                backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[i]).setOpacity(0.5).get(),
                borderWidth: 1,
                shape: 'arc'
            });

            nextBgInnerRadius += (bgRadiusDiff + 1);
        }

        this.options.series.reverse();
        this.options.pane.background.reverse();
        var chart = Highcharts.chart('container', this.options);
        return this.options;
    }


    var series = [
{name:'A',id :0, data:10, color:'#043310', bgcolor:'#033249'},
{name:'B',id :1, data:30, color:'#024230', bgcolor:'#134349'},
{name:'C',id :2, data:50, color:'#042210', bgcolor:'#022249'},
{name:'D',id :2, data:150, color:'#042210', bgcolor:'#022249'},
{name:'E',id :2, data:250, color:'#042210', bgcolor:'#022249'},
];/*
{name:'F',id :2, data:350, color:'#042210', bgcolor:'#022249'},
{name:'G',id :2, data:150, color:'#042210', bgcolor:'#022249'},
{name:'H',id :2, data:240, color:'#042210', bgcolor:'#022249'},
{name:'I',id :1, data:30, color:'#024230', bgcolor:'#134349'},
{name:'J',id :2, data:50, color:'#042210', bgcolor:'#022249'},
{name:'I',id :1, data:30, color:'#024230', bgcolor:'#134349'},
{name:'J',id :2, data:50, color:'#042210', bgcolor:'#022249'},
];*/

buildChartOptions(series);

有人可以帮我吗？

Answer 1

对于不同容器的宽度，您不需要额外计算以应用所有窗格中的innerRadius，outerRadius和所有窗格中的radius，innerRadius系列。如果您希望系列和窗格显示具有相同的宽度并且您想要动态设置它，您可以编写一个简单的函数并设置min，max radius和caluculate radiusStep。有关参考，请查看我在下面发布的示例。

API参考：
http://api.highcharts.com/highcharts/series%3Csolidgauge%3E.data.radius
http://api.highcharts.com/highcharts/series%3Csolidgauge%3E.data.innerRadius

例：
http://jsfiddle.net/wt5Lp09r/

如何为任意数量的系列创建相等宽度的solidgauge？

1 个答案: