Binding DataViz chart (Bar chart) locally using An

2019-09-06 11:08发布

站内问答 / JavaScript
1372 1 4

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:

Bar chart in angular js

Kindly advice me how to implement.

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

1条回答
相关推荐>>
2楼-- · 2019-09-06 11:38

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).

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)