Question

我目前正在使用Highcharts蜘蛛网图表，想知道我是否可以执行以下操作

如何缩放极坐标图？（或者可能吗？）
如何在每个细分中添加背景颜色？

Answer 1

如何缩放极坐标图？（或者可能吗？）

如果你想要像zoomType这样的缩放，那么没有。 zoomType已针对极坐标图禁用highcharts-more.js。来自：

// Disable certain features on angular and polar axes
chart.inverted = false;
chartOptions.chart.zoomType = null;

如何在每个细分中添加背景色？

您可以使用数学和Chart.renderer创建和填充路径，为段的背景着色。例如，您可以这样做：

var colors = [ "pink", "yellow", "blue", "red", "green", "cyan", "teal", "indigo" ];    
var parts = 6;

for(var i = 0; i < parts; i++) {
    centerX = chart.plotLeft + chart.yAxis[0].center[0];
    centerY = chart.plotTop + chart.yAxis[0].center[1];
    axisLength = chart.yAxis[0].height;
    angleOffset = -Math.PI/2;
    angleSegment = Math.PI/(parts/2);

    firstPointX = centerX + (axisLength * Math.cos(angleOffset + (angleSegment * i)));
    firstPointY = centerY + (axisLength * Math.sin(angleOffset + (angleSegment * i)));

    secondPointX = centerX + (axisLength * Math.cos(angleOffset + (angleSegment * (i+1))));
    secondPointY = centerY + (axisLength * Math.sin(angleOffset + (angleSegment * (i+1))));                                                                                       

    chart.renderer.path([
        'M', centerX, centerY, 
        'L', firstPointX, firstPointY,
        'L', secondPointX, secondPointY,
        'Z'
    ]).attr({
        fill: colors[i % colors.length],
        'stroke-width': 1,
        'opacity': 1
    }).add();
}

如this JSFiddle demonstration所示。您只需要使用parts变量匹配类别数。

Highcharts - 蜘蛛网图表问题

1 个答案: