动态获取生成的条形颜色答案

【问题标题】：Get generated bar colour dynamically动态获取生成的条形颜色
【发布时间】：2016-11-14 13:16:16
【问题描述】：

有没有办法在 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 是一个整数值列表。

【问题讨论】：

在此处发布您的代码
@Sajeetharan 我已经发布了代码。

标签： angularjs charts zingchart

【解决方案1】：

由于您的问题是询问如何获取条形颜色，而不是设置条形颜色。我认为我的回答也很合适。

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

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);
        }  
    }  
}

如果您对 $scope.myRender 变量感到困惑，您可以阅读更多关于角度指令 here 的信息。

【讨论】：

【解决方案2】：

你可以这样设置颜色，

$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

【讨论】：

【解决方案3】：

您可以自己指定颜色、字体等。

例如

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

【讨论】：