angularJS中json数据的Highcharts条形图

我有一个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>

---

请提供一种合适的方式来嵌入json中的数据

这是我从我的webapp复制并粘贴的一条指令。这是我如何使用指令注释呈现highcharts的：并非所有指令都适用于您，其中一些指令特定于我需要的内容，但您明白了

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);
        });

    }
}
});

lrApp.directive（'chart'，function（）{
返回{
限制：'E'，
模板：“”，
是的，
替换：正确，
链接：函数（范围、元素、属性）{
var图表=空；
var chartsDefaults={
图表：{
renderTo:元素[0]，
类型：attrs.type | | null，
高度：attrs.height | | null，
宽度：attrs.width | | null，
},
颜色：范围.$eval（属性颜色）| | null，
标题：{
风格：{
显示：“无”
}
},
xAxis：{
//类别：“{”-7天“{date_format}”、“{”-6天“{date_format}”、“{”-5天“{date_format}”、“{”-4天“{date_format}”、“{”-3天“{date_format}”、“{”-2天“{date_format}”、“{”-1天“{$smarty.now{date|u format}”，
类别：范围$eval（属性日期）| |空，
gridLineDashStyle:“短点”，
gridLineColor:#C0C0“，
网格线宽度：1，
标签：{
y:27
}
},
亚克斯：{
标题：{
文本：空
},
分:0,，
gridLineDashStyle:“短点”，
gridLineColor:#C0C0“，
网格线宽度：1
},
学分：{
已启用：false
},
图例：{
已启用：false
},
打印选项：{
系列：{
影子：错，
线宽：3
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
+
this.x+'：'+this.y+'；
}
}
};
//图表数据更改时更新
范围$watch（属性值，函数（newVal，oldVal）{
如果（！newVal.length）返回；
//为了不覆盖原始图表对象，我们需要深度复制。
//这允许我们覆盖图表数据成员，并保留
//我们的原始渲染器将是相同的
var deepCopy=true；
var newSettings={}；
chartsDefaults.series=newVal；
chartsDefaults.colors=范围$eval（属性颜色）；
chartsDefaults.xAxis.categories=范围$eval（属性日期）；
console.log（chartsDefaults）；
图表=新的高点图表。图表（图表故障）；
});
}
}
});

这就是它使用的方式，很明显，你会将“line”改为bar：

---

您需要为此使用指令。搜索highcharts指令。你见过类似的主题吗？

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);
        });

    }
}
});

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