綁定DataViz公司圖表（條形圖）本地使用角

我想實現一個劍術DataViz的圖表即條形圖本地使用角結合，也我要顯示的不同顏色的條如所示的圖像中：綁定DataViz公司圖表（條形圖）本地使用角

Bar chart in angular js

請告訴我如何實施。

樣品這裏http://plnkr.co/edit/?p=catalogue

來源

2014-01-09 Vinodh

您應該爲我們創建一個起始點或小提琴來幫助您。沒有它，你會很難在這裏得到很多幫助。 – Beyers

我沒有任何教程，那麼我如何創建一個運動員？ – Vinodh

從一個沒有Angular做你想做的事情開始，並分享它。 – Beyers

開始創造了這樣的事情：

HTML：

<body ng-app="app" ng-controller="myCtrl"> 
    <div kendo-chart k-options="barOptions" /> 
</body>

的JavaScript：

var app = angular.module('app', ['kendo.directives']); 

app.controller("myCtrl", function($compile, $scope) { 
    $scope.barOptions = { 
     title: { 
      text: "Gross domestic product growth /GDP annual %/" 
     }, 
     legend: { 
      position: "top" 
     }, 
     seriesDefaults: { 
      type: "column" 
     }, 
     series: [{ 
      name: "India", 
      data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855], 
      color: "#FF0000" 
     }, { 
      name: "Russian Federation", 
      data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3], 
      color: "#FF00A0" 
     }, { 
      name: "Germany", 
      data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995], 
      color: "#FFDD00" 
     }, { 
      name: "World", 
      data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727] 
     }], 
     valueAxis: { 
      labels: { 
       format: "{0}%" 
      }, 
      line: { 
       visible: false 
      }, 
      axisCrossingValue: 0 
     }, 
     categoryAxis: { 
      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011], 
      line: { 
       visible: false 
      }, 
      labels: { 
       padding: { 
        top: 145 
       } 
      } 
     }, 
     tooltip: { 
      visible: true, 
      format: "{0}%", 
      template: "#= series.name #: #= value #" 
     } 
    }; 
});

您可以使用調節條的顏色color配置選項（demo）。

來源

2014-01-16 19:08:50

你的演示很清楚。我有一個類別軸如何爲下面的每個欄命名。 – Vinodh

看一下[this]（http://plnkr.co/edit/ywUfXRutxucd2003iqYa?p=preview） - 那是什麼意思？ –

感謝您的寶貴答案 – Vinodh

綁定DataViz公司圖表（條形圖）本地使用角

回答

相關問題