2016-11-14 2 views
3

ZingChartでバーの色を動的に生成する方法はありますか? スクリーンショットでは、棒グラフで生成される2つの色があります。棒グラフで使用される色のリストを取得したいと思います。 enter image description hereバーの色を動的に生成する

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は、整数値のリストです。

+0

ここにコードを投稿 – Sajeetharan

+0

@Sajeetharan私はコードを投稿しました。 –

答えて

5

バーの色を取得する方法を質問しているので、バーの色を設定しないでください。私は私の答えが適切かもしれないと思った。

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

youreのは、あなたが角度指令hereによりアップ読むことができます$scope.myRender変数を混同している場合。

3

あなたは、あなたが自分で色、フォントなどを指定することができ、このよう

$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

を色を設定することができます。