Question

我在Highcharts中创建了极区图。我的标签位于图表内部时遇到问题。请看这里的例子：

$('#container').highcharts({

        chart: {
            polar: true,
            backgroundColor: 'transparent',
            plotBorderWidth: null,
            margin: [0, 0, 0, 0],
            spacingTop: 0,
            spacingBottom: 0,
            spacingLeft: 0,
            spacingRight: 0
        },

        title:{
            text:''
        },

        subTitle:{
            text:''
        },

        pane: {
            startAngle: 0,
            endAngle: 360
        },

        legend: {
            enabled: false
        },

        xAxis: {
            tickInterval: 45,
            min: 0,
            max: 360,
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
               enabled: false
            },
        },

        yAxis: {
            min: 0,
            lineWidth: 0,
            minorGridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
               enabled: false
            },
        },

        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 45,
                pointPlacement: 'between',
                states: {
                    hover: {
                        enabled: true
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
                    style: {
                        textShadow: false,
                        width: 150,
                        fontSize: "16px"
                    },
                }
            },
            column: {
                pointPadding: 0,
                groupPadding: 0,
                borderWidth: borderWidth
            },
        },

        series: [{
            showInLegend: false,
            type: 'column',
            name: 'Column',
            data: data
        }],

        credits: {
            enabled: false
        }
    });

http://jsfiddle.net/c904atb3/

我注意到饼图中有＆＃34;距离＆＃34;但是极地图没有这样的选择。我也希望能够使用＆＃34;连接器＆＃34;如果可能的话，但我也不认为这可用于极地。如何更好地控制这些标签？

Answer 1

我设法通过允许标签扩展到容器外部，然后将容器设置为溢出来修复它：可见。不理想，但它有效。

dataLabels: {
    enabled: true,
    crop: false,
    overflow: 'none',
    padding: 50,
    useHTML: true,
    verticalAlign: 'middle',
    format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
    style: {
        textShadow: false,
        width: 250,
        fontSize: '22px'
    },
}

http://jsfiddle.net/c904atb3/2/

在我的生产代码中，我根据名称为每个标签添加了一个CSS类，因此我可以在CSS中调整定位。

Answer 2

我有类似的问题让标签从极地/蜘蛛图表的边界“推出”。我解决这个问题的方法是使用情节带在外圈上放一个环。

我的测试可以在这里找到：http://jsfiddle.net/brightmatrix/j3v0zstk/

在这种情况下，我在yAxis中添加了以下行：

plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]

我使用的值仅用于说明。如果您希望图表中的彩色楔形真正达到10，请为yAxis定义最大值，并使绘图带覆盖超出图表边缘的范围。

zIndex值为“5”可确保绘图带位于图表楔形顶部以产生所需效果。

我希望这有用！

Answer 3

您可以像这样设置标签的坐标：

 var data = [{
            name: "Label 1",
            dataLabels: {
                    x:100,
                    y:100
            },
            y: 10,
            color: "#9fe642"
        },

http://jsfiddle.net/c904atb3/1/

Highcharts极地标签定制

3 个答案: