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

Posted

技术标签:

【中文标题】使用 Angular 在本地绑定 DataViz 图表（条形图）【英文标题】：Binding DataViz chart (Bar chart) locally using Angular 【发布时间】：2014-01-27 23:15:16 【问题描述】：

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

请告诉我如何实施。

这里创建了一个示例http://plnkr.co/edit/?p=catalogue

【问题讨论】：

您应该为我们创建一个起点 plunker 或 fiddle 来帮助您。没有它，您将很难在这里获得很多帮助。 我没有任何教程，那么我该如何创建一个 plunker？ 从一个 plunker 开始，它可以在没有 Angular 的情况下做你想做的事情并分享它。 【参考方案1】：

从这样的开始：

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) 调整条形颜色。

【讨论】：

你的演示很清晰。我有一个类别轴，如何为下面的每个栏命名。 看看this - 你是这个意思吗？ @LarsHöppner，我很欣赏这个答案。将演示中的 4 个文件复制到一个目录后，我们应该看到图表出现在浏览器中还是还有更多？谢谢！ @PatrickT 有 5 个对 JS 文件的引用，所以它们都必须在那里；如果它不起作用，请检查浏览器的控制台 @LarsHöppner，感谢您的回复。在上面的链接中，我看到的只有 4 个文件：index.html、angular.kendo.js、script.js、style.css. 其他 js 文件，例如 jquery-1.10.2.min.js 似乎是通过 url 引用的。我不需要它们的本地副本吗？

以上是关于使用 Angular 在本地绑定 DataViz 图表（条形图）的主要内容，如果未能解决你的问题，请参考以下文章

ModuleNotFoundError：没有名为“dataviz”的模块

带有表单和 Angular 日期的 Angular/HTML 输入本地日期时间

使用 Kendo Dataviz Vertical Bullet Graph，如何添加类似于 Bar Graph 的标签？

强制 Kendo Dataviz 中的日期轴具有所有值

数据绑定到具有角度本地存储数据的表

Autodesk React Forge 问题与 forge-dataviz-iot-react-components 在空项目中