简体   繁体   English

如何设置带有多个环的每个切片的jqplot甜甜圈图颜色?

[英]How to set jqplot donut chart colours per slice with multiple rings?

I'm trying to set the colors to a jqplot donut chart with multiple rings. 我正在尝试将颜色设置为带有多个环的jqplot甜甜圈图。 I need that each slice be filled with a specific color like the example below: 我需要每个切片都填充特定的颜色,如下例所示:

在此处输入图片说明

I read in the documentation that I need to set the " varyBarColor " to true , and use " series " with an array of many " seriesColors " however it only shows the default colors. 我说我需要在“varyBarColor”设置为true,并使用“ 串联 ”与许多“seriesColors”一个数组的文件中读取但是它只显示默认颜色。

Here's the code I have so far: 这是我到目前为止的代码:

var s1 = [['a',8], ['b',12]]; 
var s2 = [['a',3], ['b',17]]; 
var s3 = [['a',6], ['b',14]]; 
var s4 = [['a',10], ['b',10]]; 
var s5 = [['a',2], ['b',18]];

var plot4 = $.jqplot('divId', [s1, s2, s3, s4, s5], {
    seriesDefaults: {               
        series: [
            {seriesColors: [ "#8156a1", "#000"]},
            {seriesColors: [ "#418cc8", "#ec79c0"]},
            {seriesColors: [ "#ec79c0", "#f69c44",]},
            {seriesColors: [ "#f69c44", "#fadb48"]},
            {seriesColors: [ "#fadb48", "black"]}
        ],
        renderer:$.jqplot.DonutRenderer,            
        rendererOptions:{        
            sliceMargin: 0,
            lineWidth: 0,        
            startAngle: 90,
            showDataLabels: false,
            shadowAlpha: 0,     
            ringMargin:2,               
            varyBarColor: true,             
            thickness: 7                
        }
    },
    grid: {         
        background: 'transparent',
        borderColor: 'transparent',
        shadow: false,
        drawGridLines: false,
        gridLineColor: 'transparent',
        borderWidth: '0'
    }
});

Any idea on how to make it work? 关于如何使其工作的任何想法?

Thanks in advance. 提前致谢。

Ok, I managed to solve the problem, (a very stupid one in fact). 好的,我设法解决了这个问题(实际上是一个非常愚蠢的问题)。 The series value should be outside of seriesDefaults, not inside like I was doing it: 系列值应该在seriesDefaults之外,而不是像我以前那样在内部:

var plot4 = $.jqplot('divId', [s1, s2, s3, s4, s5], {
series: [
    {seriesColors: [ "#8156a1", "#000"]},
    {seriesColors: [ "#418cc8", "#ec79c0"]},
    {seriesColors: [ "#ec79c0", "#f69c44",]},
    {seriesColors: [ "#f69c44", "#fadb48"]},
    {seriesColors: [ "#fadb48", "black"]}
],
seriesDefaults: { 
    renderer:$.jqplot.DonutRenderer,            
    rendererOptions:{        
        sliceMargin: 0,
        lineWidth: 0,        
        startAngle: 90,
        showDataLabels: false,
        shadowAlpha: 0,     
        ringMargin:2,               
        varyBarColor: true,             
        thickness: 7                
    }
},
grid: {         
    background: 'transparent',
    borderColor: 'transparent',
    shadow: false,
    drawGridLines: false,
    gridLineColor: 'transparent',
    borderWidth: '0'
}

}); });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM