dojox饼图的独特填充颜色

时间:2013-12-18 20:49:22

标签: javascript charts dojo

我正在创建一个饼图,其中包含两个饼图。我知道我可以添加填充属性和颜色来说明我想要整个饼图的颜色但是我希望将一个饼图蓝色切片,另一个切片为绿色。

majpieChart = new Chart("majorPieChart");
        majpieChart.setTheme(Claro).addPlot("default", {
            type: "Pie",
            font: "normal normal 10pt Tahoma",
            fontColor: "#1c3923",
            labelWiring: "#1c3923",
            radius: 100,
            labelStyle: "columns",
            htmlLabels: true,
            startAngle: -10,
            fill : {colors: [ {offset: 0, color: "#00ff78"},
                              {offset: 1, color: "#7f0043"}
                            ]
                    }
        }).addSeries("Major",majBreak); 

我尝试了这个新的填充,希望它能给我上面要求的相同效果,但它给出了更多的涟漪色效果。有什么想法吗?

1 个答案:

答案 0 :(得分:0)

你可以创建自己的简单主题,这是简单的主题,如果你想要渐变,那么就必须创建一个更复杂的主题。 http://dojotoolkit.org/documentation/tutorials/1.8/charting/

require([
    "dojox/charting/Chart",
    "dojox/charting/themes/Claro", "dojox/charting/plot2d/Pie",
    "dojox/charting/SimpleTheme",
    "dojo/domReady!"], function (Chart, Claro, Pie, theme) {
    chartData = [{
        x: 1,
        y: 19021
    }, {
        x: 1,
        y: 12837
    }, ];
    majpieChart = new Chart("majorPieChart");
    majpieChart.setTheme(new theme({
        colors: [
            "#00ff78",
            "#7f0043",
            "#8ecfb0",
            "#f8acac",
            "#cc4482"]
    })).addPlot("default", {
        type: "Pie",
        font: "normal normal 10pt Tahoma",
        fontColor: "#1c3923",
        labelWiring: "#1c3923",
        radius: 100,
        labelStyle: "columns",
        htmlLabels: true,
        startAngle: -10,
    }).addSeries("Major", chartData);

    majpieChart.render();
});

小提琴:: http://jsfiddle.net/YL2Mf/

<强>更新 您还可以将填充颜色添加到图表数据中:

chartData = [{
    x: 1,
    y: 19021,
    fill:"green"
}, {
    x: 1,
    y: 12837,
    fill:"yellow"
}, ];

小提琴:: http://jsfiddle.net/theinnkeeper/a56Y9/1/