Question

我有一个highcharts条形图，其值来自json，其格式如下：

"bargraph": 
    [
        {
           "categories": "['S', 'M', 'T', 'W', 'T', 'F']",
            "series1": "[800, 1100, 80, 1800, 1600, 2000]",
            "series2": "[800, 1100, 80, 1800, 1200, 800]"
        }
    ]

如何在angularJS

中为条形图嵌入这些值

HTML代码：

<div id="bargraph" bargraph={{bargraph}}><\div>

指令：

angular.module('example').directive('bargraph', function () {
    element.highcharts({

                    xAxis: [
                        {
                            categories: []   //embed categories value here
                        },
                    series: [
                        {
                            name: 'series1',
                             data: [] //Embed series1 data here

                        },
                        {
                            name: 'series2',
                            data: [] //Embed series2 data here
                        }
                    ]
    })
})

请提供一种从json嵌入数据的合适方法。

Answer 1

这是我从我的webapp复制和粘贴的指令，它是我如何使用指令渲染高级图注意：并非所有这个指令都适用于你，其中一些是特定于我需要但你明白了。

lrApp.directive('chart', function () {
return {
    restrict: 'E',
    template: '<div></div>',
    transclude: true,
    replace: true,

    link: function (scope, element, attrs) {
        var chart = null;
        var chartsDefaults = {
            chart: {
                renderTo: element[0],
                type: attrs.type || null,
                height: attrs.height || null,
                width: attrs.width || null,
            },
            colors: scope.$eval(attrs.colors) || null,
            title: {
                style: {
                    display: 'none'
                }
            },
            xAxis: {
                //categories: ['{"-7 days"|date_format}','{"-6 days"|date_format}','{"-5 days"|date_format}','{"-4 days"|date_format}', '{"-3 days"|date_format}', '{"-2 days"|date_format}', '{"-1 day"|date_format}', '{$smarty.now|date_format}'],
                categories: scope.$eval(attrs.dates) || null,
                gridLineDashStyle: 'ShortDot',
                gridLineColor: "#C0C0C0",
                gridLineWidth: 1,
                labels: {
                    y: 27
                }
            },
            yAxis: {
                title: {
                    text: null
                },
                min: 0,
                gridLineDashStyle: 'ShortDot',
                gridLineColor: "#C0C0C0",
                gridLineWidth: 1
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                series: {
                    shadow: false,
                    lineWidth: 3
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.x + ': ' + this.y + '</b>';
                }
            }
        };

        //Update when charts data changes
        scope.$watch(attrs.value, function (newVal, oldVal) {
            if (!newVal.length) return;
            // We need deep copy in order to NOT override original chart object.
            // This allows us to override chart data member and still the keep
            // our original renderTo will be the same
            var deepCopy = true;
            var newSettings = {};
            chartsDefaults.series = newVal;
            chartsDefaults.colors = scope.$eval(attrs.colors);
            chartsDefaults.xAxis.categories = scope.$eval(attrs.dates);
            console.log(chartsDefaults);
            chart = new Highcharts.Chart(chartsDefaults);
        });

    }
}
});

这就是它如何使用它显然你会将“line”改为bar：

<chart value="stats.sets" dates="stats.days" colors="stats.colors" type="line"></chart>

来自angularJS的json数据的Highcharts条形图

1 个答案: