更改道场图表 ThreeD 主题的颜色答案

【问题标题】：Changing color on dojo charting ThreeD theme更改道场图表 ThreeD 主题的颜色
【发布时间】：2013-04-24 18:43:38
【问题描述】：

我正在使用来自 dojo 图表的 ThreeD 主题显示图表。当我修改数据时，我可以显示不同的颜色图表中的条，我失去了 3D 外观。

ThreeD 的默认颜色是红色

{y:"15",tooltip: "15 警报",fill: 'yellow'}

在数据项上添加“填充：黄色”会将条形更改为黄色，但我失去了 3D 外观。

关于更改主题颜色和保持 3d 外观的最佳方法有什么想法吗？？

【问题讨论】：

标签： dojo dojox.charting

【解决方案1】：

只需创建一个基于 ThreeD 的新主题，然后将颜色变量更改为您要使用的颜色即可。我建议你：

阅读这篇博文：http://www.sitepen.com/blog/2010/07/26/dojo-chart-theming/
将 dojox/charting/themes/ThreeD.js 克隆到您自己的主题文件中
编辑您的新文件（您应该只需要修改顶部的“colors”数组）
使用您新创建的主题...

【讨论】：

感谢菲利普提供的信息！我没有创建自己的主题文件，而是从 ThreeD.js 获取代码，并为 JSON 字符串中的每个图形条应用我想要的颜色。请参阅下面的帖子...
克隆文件允许您在其他地方重用主题，而不是每次要应用该特定主题时都进行复制/粘贴...
感谢 sitepen 的链接，非常有帮助。现在也要制作我自己的自定义主题。回实验室……

【解决方案2】：

我可以通过从 ThreeD.js 获取代码并将其应用到我的应用来完成此操作：

var colors = ["#f00", "#0f0", "#00f", "#ff0", "#0ff", "#f0f", "dojox/charting/themes/common"];
var defaultFill = {type: "linear", space: "shape", x1: 0, y1: 0, x2: 100, y2: 0};
    // 3D cylinder map is calculated using dojox.gfx3d
var cyl3dMap = [
        {o: 0.00, i: 174}, {o: 0.08, i: 231}, {o: 0.18, i: 237}, {o: 0.30, i: 231},
        {o: 0.39, i: 221}, {o: 0.49, i: 206}, {o: 0.58, i: 187}, {o: 0.68, i: 165},
        {o: 0.80, i: 128}, {o: 0.90, i: 102}, {o: 1.00, i: 174}
        ];

var hiliteIndex = 2;
var hiliteIntensity = 100;
var lumStroke = 50;
var cyl3dFills = ArrayUtil.map(colors, function(c){
    var fill = lang.delegate(defaultFill);
    var colors = fill.colors = gradientGenerator.generateGradientByIntensity(c, cyl3dMap),
        hilite = colors[hiliteIndex].color;
        // add highlight
        hilite.r += hiliteIntensity;
        hilite.g += hiliteIntensity;
        hilite.b += hiliteIntensity;
        hilite.sanitize();
        return fill;
});

当我为图形数据创建 JSON 字符串时，我使用 cyl3dFill[x] 来设置颜色：

{y: "10", tooltip: "10 Alarms", fill: cyl3dFill[3]}  //Sets 3D Yellow fill

如果未向数据记录添加填充，则采用默认颜色（红色）。不确定这是否是一个坏方法，但我喜欢它......

不确定下一个方法对 ThreeD 主题有什么作用，但看起来它改变了主题的颜色。无法让方法工作...

https://dojotoolkit.org/api/dojox/charting/themes/ThreeD

【讨论】：