使用Angular绑定DataViz图表（条形图）

本文介绍了使用Angular绑定DataViz图表（条形图）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想实现一个kendo DataViz图表，即，本地使用Angular绑定的条形图，我想显示不同颜色的条形，如图所示：

请告诉我如何

此处创建了一个示例

解决方案

开始类似这样的操作： / p>

HTML：

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

JavaScript：

 code> var app = angular.module（'app'，['kendo.directives']）; 
 
 app.controller（myCtrl，function（$ compile，$ scope）{
 $ scope.barOptions = {
 title：{
 text：Gross国内产品增长/ GDP年度％/
}，
 legend：{
 position：top
}，
 seriesDefaults：{
 type： column
}，
系列：[{
 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.15， 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}％
}，
行：{
 visible：false 
}，
 axisCrossingValue：0 
}，
 categoryAxis：{
 categories：[2002,2003,2004,2005,2006,2007,2008,2009,2010,2011]，
行：{
 visible：false 
} ，
标签：{
 padding：{
 top：145 
} 
} 
}，
 tooltip：{
 visible ：true，
 format：{0}％，
 template：＃= series.name＃：＃= value＃
} 
} 
}）;

您可以使用配置选项（）。

I want to implement a kendo DataViz chart i.e., Bar chart locally using Angular binding, also i want to show bars of different colours as shown in the image:

Kindly advice me how to implement.

A sample was created here http://plnkr.co/edit/?p=catalogue

解决方案

Start with something like this:

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

You can adjust the bar colors using the color configuration option (demo).

这篇关于使用Angular绑定DataViz图表（条形图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！