Highcharts极地标签定制

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/

我注意到饼图有“距离”选项，但极坐标图没有这样的选项。如果可能的话，我也希望能够使用“连接器”，但我认为这也不适用于极地。如何更好地控制这些标签？

Answer 1

在将标签从极地/蜘蛛图的边界“推出”时，我也遇到过类似的问题。我解决这个问题的方法是使用绘图带在外缘周围放置一个环。

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

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

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

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

“5”的 zIndex 值确保绘图带位于图表楔形顶部以提供所需的效果。

希望对你有帮助！

Answer 2

我设法通过允许标签延伸到容器之外来解决它，然后将容器设置为溢出：可见。不理想，但它有效。

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 3

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

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

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