0

我是 AngularJS 的新手，我想在 AngularJS 中绘制 R-graph。我搜索了很多，找不到任何结果。我得到了一个使用 Angular js 绘制 Google 图表的示例。以同样的方式，我需要在 AngularJS 中绘制 r-graph。任何人都可以建议使用 AngularJS 绘制 r-graph 的方法或示例。

4

1 回答 1

0

我也在做同样的事情，我找到了解决方案。我认为您可以开发它以满足您的需求。

首先，您必须定义一个<div>包含图表的标签：

 <div style="width: 750px; height: 300px" id="chart-container">

第二部分是创建你的控制器。我不会深入探讨创建应用程序等的细节。这是我创建的示例：

//
// ChartController
//
app.controller('ChartControllerImpl', [
    '$element', 
    '$log', 
    function($element,$log){
        $log.info("Hello from ChartControllerImpl");

        $log.info($element);
        $log.info($element[0].id);

        var data = {
                id: $element[0].id,
                data: [0.05,0.06,0.01,0.06,0.09,0.02,0.07],
                options: {
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    key: ['Richard','Charlie'],

                    gutterTop: 55,

                    linewidth: 5,
                    hmargin: 0,

                    title: 'A basic linechart',

                    gutterLeft: 50,
                    gutterBottom: 50,
                    yaxisDecimals: 2,

                    tickmarksStyle: 'endcircle',
                    tickmarksFill: 'white',
                    tickmarksLinewidth: 3,
                    tickmarksSize: 10,

                    spline: true,
                    xaxis: false,
                    yaxis: false,
                    xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                    shadow: true
                }
            };

        new RGraph.SVG.Line(data).trace();
    } // function $http, $log
] ); // ChartControllerImpl

最后，您必须通过指令将控制器与 html 指令链接：

 <div style="width: 750px; height: 300px" id="chart-container"
      ng-controller="ChartControllerImpl as chartController">
于 2017-08-09T18:55:12.783 回答