将自定义颜色添加到饼图

时间:2014-05-20 14:30:19

标签: d3.js sapui5

我要求在饼图中为每个元素添加特定颜色。 下面是我的静态json饼图代码。

而不是viz图表给出的默认颜色,我希望在饼图中有红色,绿色,橙色和蓝色。

有人成功改变了颜色吗?

var oModel = new sap.ui.model.json.JSONModel({
     businessData : [
               {Country :"Canada",revenue:2410.87, color: "red"},
                {Country :"China",revenue:638.29, color: "green"},
                {Country :"France",revenue:487.66, color: "orange"},
                {Country :"Germany",revenue:170.23, color: "blue"}
       ]
});
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
         dimensions : [ {axis : 1, name : 'Country',  value : "{Country}" } ],
         measures : [ { name : 'Revenue',  value : '{revenue}' } ],
         data : { path : "/businessData" }
      });
var oBarChart = new sap.viz.ui5.Pie({
          width : "80%", height : "400px",
          plotArea : {
                   'colorPalette' : d3.scale.category20().range()
                },
           title : { visible : true, text : 'Revenue By Country' },
           dataset : oDataset
     });
oBarChart.setModel(oModel);
oBarChart.placeAt("sample1");

enter image description here

2 个答案:

答案 0 :(得分:4)

简单的答案

plotArea : {
  'colorPalette' : ["red","green","orange","blue"]
},

请参阅jsBin example

Colours in Pie

答案 1 :(得分:1)

有两种方法可以改变颜色:

1:@Jasper_07回答

2:添加这段代码

 var pieType = new sap.viz.ui5.types.Pie();
 pieType.setColorPalette(['#AAFFAA','#00FF00','#00AAAA','#FF0000']);   
 oBarChart.setPlotArea(pieType);
相关问题