【问题标题】:Highcharts: Radial gradient not showing on custom chartHighcharts:径向渐变未显示在自定义图表上
【发布时间】:2013-06-07 23:32:43
【问题描述】:

所以我正在尝试使用我的自定义饼图来实现径向渐变。 我使用自己的颜色而不是默认颜色。

我尝试实现此线程中看到的自定义颜色:

HighCharts: How to combine custom colors with gradient

但我认为对于我的数据对象,我需要以不同的方式实现它们。

我的图表示例位于此处: http://jsfiddle.net/PcX4b/2/

这是我调用图表之前的代码:

    data = [
    {
        color: "#61A6EC",
        name: "Equities",
        y: 40.07
    },{
        color: "#CC2A2A",
        name: "Cash",
        y: 30
    },{
        color: "#FFC448",
        name: "Options",
        y: 11.55
    },{
        color: "#ADD54D",
        name: "Fixed Income",
        y: 0.18
    },{
        color: "#FD8645",
        name: "Other",
        y: 0.00001
    }
];

var colors =[];     
var innerData = [];
var outerData = [];
for (var i = 0; i < data.length; i++) {
    var brightness = 0.1;
    // inner circle
    innerData.push({
        name: data[i].name,
        y: data[i].y,
        color: data[i].color
    });
    // outer circle
    outerData.push({
        name: data[i].name,
        y: data[i].y,
        color: 'rgba(255,255,255,0.5)'
    });
    colors.push(data[i].color);
}
    colors: Highcharts.map(colors, function(color) {
return {
    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
    stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
    ]
};

})

在那里你可以看到图表正在渲染,但我没有看到任何渐变。不知道我做错了什么,我没有收到任何错误,所以我很困惑为什么这不起作用。

【问题讨论】:

    标签: highcharts radial-gradients


    【解决方案1】:

    你需要使用Highcharts.getOptions().colors并添加新的color sby map()函数,请看下面的例子:

    http://jsfiddle.net/CkKDy/1/

    【讨论】:

    • 我添加了它,但它似乎仍然没有显示渐变。 jsfiddle.net/PcX4b/3
    • 但是我的例子有什么问题,它有渐变和你的颜色?
    • 我一定错过了什么。我实现了 Highcharts.getOptions().colors 但它仍然不能与我的图表一起使用。我真的认为可能需要设置或打开其他东西?你能看到这张图表吗? jsfiddle.net/PcX4b/3
    【解决方案2】:

    尝试使用包含属性radialGradient和stops的对象手动设置属性'color'

    color:{radialGradient:...,stops:...}
    

    是的,它应该可以工作。一分钟前检查过

    【讨论】:

    • 所以我在这里尝试了:jsfiddle.net/PcX4b/2,我得到了所有这些错误。你确定这是可能的吗?你能把它的 jsfiddle 发给我,和我刚刚发布的小提琴一起工作吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-04
    • 1970-01-01
    • 2022-06-28
    • 1970-01-01
    • 2014-01-05
    • 1970-01-01
    相关资源
    最近更新 更多