jqplot渐变色答案

【问题标题】：jqplot gradientcolorjqplot渐变色
【发布时间】：2012-10-17 08:20:36
【问题描述】：

我正在使用jqplot。有没有办法为我的饼图的每个切片设置自定义渐变颜色？我正在使用 seriescolor 选项：

seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501"],

【问题讨论】：

标签： javascript jquery jquery-plugins gradient jqplot

【解决方案1】：

确保将“seriesColors”选项放置在“seriesDefaults”对象中。

一个简单的例子：

        var plot1 = $.jqplot('div1', [['a', 8], ['b', 12], ['c', 6]], {
        title: 'Chart 1',

            seriesDefaults:{
                renderer:$.jqplot.PieRenderer,
            rendererOptions:{
                  showDataLabels: true,
                  dataLabels:'percent'
            }
            },
            seriesColors: ["#F3CBBF", "#BFDDE5", "#CF3501"],
            highlighter: {
                show: true
        },
            legend: {
                        show:true,
                        location: 's', 
                        placement: 'outsideGrid'}
        });

确保包含饼图渲染器 javascript 文件以及 jqplot-css 文件（如果要显示图例）

【讨论】：

【解决方案2】：

jqPlot 饼图不支持开箱即用的渐变。 API (http://www.jqplot.com/docs/files/plugins/jqplot-pieRenderer-js.html) 中没有属性设置。您很可能必须在 CSS、HTML 5 和/或 canvas 对象中执行此操作。不幸的是，您还会遇到不同的浏览器以不同的方式处理渐变。 jqPlot 气泡图具有渐变属性，但我知道这无助于让您知道有一种图表类型可以做到这一点 (http://www.jqplot.com/docs/files/plugins/jqplot-bubbleRenderer-js.html)。

seriesDefaults: {
    renderer: $.jqplot.BubbleRenderer,
    rendererOptions: {
        bubbleAlpha: 0.7,
        varyBubbleColors: false,
        bubbleGradients: true
    }
}

【讨论】：