动态生成条形颜色

有没有什么方法可以在ZingChart中动态生成条形颜色？在屏幕截图中有在条形图中生成了两种颜色，我想要获取条形图中使用的颜色列表。动态生成条形颜色

HTML文件

<zingchart id="timesheet-bar-chart" zc-values="barValues" zc- json="myObj"></zingchart>

控制器

$scope.myObj = { 
    "type": "bar", 
    "plot":{ 
    "stacked":true, 
    "stack-type":"normal" /* Optional specification */ 
    }, 
"scale-x":{ 
     "transform":{ 
     "type":"date", 
     "all":"%d %M", 
     "item": { 
      "visible":false 
     } 
     }, 
    "values":$scope.bar_x_axis, 
    }, 
    };

和barValues是整数值的列表。

来源

2016-11-14 piyush singh

在这里发布您的代码 – Sajeetharan

@Sajeetharan我已经发布了代码。 –

由于您的问题是询问如何获取条形颜色，请勿设置条形颜色。我想我的答案也是适当的。

您可以使用图表中的getobjectinfo的API。

demo here

$scope.myRender = { 
    events : { 
     complete : function(p) { 
      var info1 = zingchart.exec(p.id, 'getobjectinfo', { 
       object : 'plot', 
       plotindex: 0 
      }); 
      var info2 = zingchart.exec(p.id, 'getobjectinfo', { 
       object : 'plot', 
       plotindex: 1 
      }); 
      console.log(info1, info2); 
     } 
    } 
}

如果youre困惑的$scope.myRender变量，你可以更多的阅读了关于角指令here。

来源

2016-11-16 18:56:04 nardecky

您可以自己设置颜色像这样，

$scope.myJson = { 
     'plot': { 
     'styles': ['#yellow', 'red', 'blue'] 
     }, 
     'scale-x': { 
     'values': ['white', 'red', 'pink'] 
     }, 
     'type': 'bar', 
     'series': [{ 
     'text': 'Product History Color', 
     'values': [2, 6, 8] 
     }] 
    }

DEMO

来源

2016-11-14 14:20:33 Sajeetharan

您可以指定颜色，字体等。

例如

scaleX: { 
    labels: ['Facebook','Apple', 'Microsoft', 'Intel','Google', 'Amazon'], 
    item: { 
    fontFamily: "Roboto", 
    fontSize: 14 
    }, 
    lineColor: "#DDD", 
    tick:{ 
    visible: false 
    } 
},

来源

2016-11-14 14:25:02

动态生成条形颜色

回答

相关问题