Highcharts极坐标图：多个窗格线段颜色 [英] Highcharts Polar Chart: Multiple pane segment colors

问题描述

我正在尝试改变极坐标图中每个分段的背景颜色。为背景设置单一颜色很容易，但是可以为每个极片的颜色设置不同的颜色吗？

一个例子是8种不同的颜色以下图表分段：

http：// www.highcharts.com/demo/polar

谢谢

解决方案

据我所知，在API中没有简单的方法。

我将介绍一个利用图表

  var colors = [/ color] .renderer 可为您的极地图表的每个切片绘制单一颜色： 粉红色，黄色，蓝色，红色，绿色，青色，蓝绿色，靛蓝]; 
 var parts = 8; 
 
 for（var i = 0; i< parts; i ++）{
 chart.renderer.arc（chart.plotLeft + chart.yAxis [0] .center [0]，
 chart.plotTop + chart.yAxis [0] .center [1]，
 chart.yAxis [0] .height，
 0，
 -Math.PI +（Math。 PI /（parts / 2）* i），
 -Math.PI +（Math.PI /（parts / 2）*（i + 1）））。attr（{
 fill：colors [ i％colors.length]，
'stroke-width'：1，
'opacity'：1 
}）。add（）; 
} 
  

点击这个JSFiddle链接来观看现场演示。

它使用 renderer.arc 来绘制每个切片，信息来自图表关于中心和轴高度。使用起始角度和结束角度绘制弧度，以弧度给出。使用颜色数组可以对各个切片着色，切片数量可以用部分变量进行控制。

如果有多于零件的颜色，它将从颜色数组的开头从数组开始颜色，使用颜色[i％colors.length] 。

I'm trying to change the background color of each of the segments of a polar chart. It's easy to set a singular color for the background, but is it possible to set a different color for each piece of the polar pie?

An example would be 8 different colors for the chart segments below:

http://www.highcharts.com/demo/polar

Thanks

解决方案

To my knowledge there is no easy way to do this within the API.

I'll present a solution that utilizes the chart.renderer to draw a single color for each slice of your polar chart:

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

for(var i = 0; i < parts; i++) {
    chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
                       chart.plotTop + chart.yAxis[0].center[1], 
                       chart.yAxis[0].height, 
                       0, 
                       -Math.PI + (Math.PI/(parts/2) * i), 
                       -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({
        fill: colors[i % colors.length],
        'stroke-width': 1,
        'opacity': 1
    }).add();
}

Click this JSFiddle link to see a live demonstration.

It uses the renderer.arc to draw each slice with the information from chart about center and axis height. The arcs are drawn using start and end angle, given in radians. The various slices can be colored using the colors array, and the number of slices can be controlled with the parts variable.

If there are more parts than colors it will start from the beginning of the colors array when it runs out of colors, using colors[i % colors.length].

这篇关于Highcharts极坐标图：多个窗格线段颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！