渲染采用了棱角分明的js指令Highcharts [英] Rendering Highcharts using Angular js Directives

问题描述

我是新来的JS角，并试图通过创建一个指令，使我highcharts（基本型）。请告诉我，我应该在这里遵循的方法。任何帮助将是AP preciated。

下面是我对highcharts脚本：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
    $（'＃集装箱'）。highcharts（{
        图：{
            键入：'行'，
            marginRight：130，
            marginBottom：25
        }，
        标题：{
            文字：平均气温，
            X：-20 //中心
        }，
        字幕：{
            文本：来源：WorldClimate.com'，
            X：-20
        }，
        X轴：{
            类别：['扬'，'月'，'月'，'月'，'五一'，'军'，
                月，月，月，月，月，月]
        }，
        Y轴：{
            标题：{
                文本：温度（℃）'
            }，
            主要情节：[{
                值：0，
                宽度：1，
                颜色：＃808080
            }]
        }，
        提示：{
            valueSuffix：'°C'
        }，
        传说：{
            布局：垂直，
            对齐：正确的，
            verticalAlign：'顶'，
            X：-10，
            Y：100，
            边框宽度：0
        }，
        系列：[{
            名称：东京，
            数据：[7.0，6.9，9.5，14.5，18.2，21.5，25.2，26.5，23.3，18.3，13.9，9.6]
        }，{
            名称：'纽约'，
            数据：[-0.2，0.8，5.7，11.3，17.0，22.0，24.8，24.1，20.1，14.1，8.6，2.5]
        }，{
            名称：柏林，
            数据：[-0.9，0.6，3.5，8.4，13.5，17.0，18.6，17.9，14.3，9.0，3.9，1.0]
        }，{
            名称：伦敦，
            数据：[3.9，4.2，5.7，8.5，11.9，15.2，17.0，16.6，14.2，10.3，6.6，4.8]
        }]
    }）;
}）;
    ＆LT; / SCRIPT＆GT;
 

解决方案

饼图的例子：

http://jsfiddle.net/csTzc/

 函数MyCtrl（$范围，limitToFilter）{
  $ scope.ideas = [
    ['ideas1'，1]，
    ['ideas2'，8]，
    ['ideas3'，5]
  ];  $ scope.limitedIdeas = limitToFilter（$ scope.ideas，2）;
}angular.module（'对myApp'，[]）
  .directive（'hcPie'，函数（）{
  返回{
    限制：'C'，
    更换：真实，
    范围： {
      项目：'='
    }，
    控制器：函数（$范围，$元，$ ATTRS）{
      的console.log（2）;    }，
    模板：'＆LT; D​​IV ID =容器的风格=保证金：0汽车＆GT;不工作＆LT; / DIV＆GT;，
    链接：功能（范围，元素，ATTRS）{
      的console.log（3）;
      VAR图=新Highcharts.Chart（选件）;
      范围。$表（项目功能（newValue）以{
        chart.series [0] .setData（为newValue，真）;
      }，真正的）;    }
  }
}）;
 

I am new to Angular JS and trying to render my highcharts (Basic Line) by creating a directive. Please tell me the approach I should follow here. Any help would be appreciated.

Here is my script for the highcharts:

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});


    </script>

解决方案

Example of pie chart:

http://jsfiddle.net/csTzc/

    function MyCtrl($scope, limitToFilter) {
  $scope.ideas = [
    ['ideas1', 1],
    ['ideas2', 8],
    ['ideas3', 5]
  ];

  $scope.limitedIdeas = limitToFilter($scope.ideas, 2);
}

angular.module('myApp', [])
  .directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
      console.log(2);

    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      console.log(3);
      var chart = new Highcharts.Chart(options);
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);

    }
  }
});

这篇关于渲染采用了棱角分明的js指令Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！