版权声明:本文可转载 ,但转载必须注明出处并附带本文链接 https://blog.csdn.net/qq_27868533/article/details/81284814
AngularJs调用highChart模块插件
highchart 插件是一款非常实用而且兼容性强大的数据可视化图标插件,基本常用的图表都有实例,只需要引入模块,然后调整数据结构即可完成此功能。
1、在自己的module中引入 highcharts-ng
模块
angular.module("myApp", ["highcharts-ng"]);
2、controller相关处理
$scope.chart = {
// 图表配置项
options: {
title: {text: ''},
credits:{enabled: false },// 禁用版权信息
xAxis: {title: {text: ""}, categories: [], tickInterval: 1},
yAxis: {title: {text: ''}},
tooltip: {
shared: true
}
},
// 数据项
series: [
{name: "", data: []},
{name: "", data: []},
]
};
3、在页面调用指令
<highchart id="chart" series="chart.series" titles="" options="chart.options"></highchart>
说明:series="chart.series"
是数据设置,titles=""
图表的名称设置, options="chart.options"
图表的配置项,controller里处理完数据即可完成图表展示。。
highcharts-ng
模块内容
angular.module('highcharts-ng', [])
.directive('highchart', function () {
var seriesId = 0;
//动态生成id
var ensureIds = function (series) {
series.forEach(function (s) {
if (!angular.isDefined(s.id)) {
s.id = "series-" + seriesId++;
}
});
};
var getMergedOptions = function (element, options, series) {
var defaultOptions = {
chart: {
renderTo: element[0]
},
titles: {},
series: []
};
var mergedOptions = {};
if (options) {
mergedOptions = $.extend(true, {}, defaultOptions, options);
} else {
mergedOptions = defaultOptions;
}
if(series) {
mergedOptions.series = series
}
return mergedOptions
};
return {
restrict: 'EC',
replace: false,
scope: {
series: '=',
options: '=',
titles: '='
},
link: function (scope, element) {
var mergedOptions = getMergedOptions(element, scope.options, scope.series);
var chart = new Highcharts.Chart(mergedOptions);
scope.$watch("series", function (newSeries, oldSeries) {
if (newSeries === oldSeries) return;
if (newSeries) {
ensureIds(newSeries);
var ids = [];
//Find series to add or update
newSeries.forEach(function (s) {
ids.push(s.id);
var chartSeries = chart.get(s.id);
if (chartSeries) {
chartSeries.update(angular.copy(s), false);
} else {
chart.addSeries(angular.copy(s), false)
}
});
//Now remove any missing series
chart.series.forEach(function (s) {
if (ids.indexOf(s.options.id) < 0) {
s.remove(false);
}
});
chart.redraw();
}
}, true);
scope.$watch("titles", function (newTitle) {
chart.setTitle(newTitle, true);
}, true);
scope.$watch("options", function (newOptions, oldOptions, scope) {
if (newOptions === oldOptions) return;
chart.destroy();
var mergedOptions = getMergedOptions(element, newOptions);
chart = new Highcharts.Chart(mergedOptions);
chart.setTitle(scope.titles, true);
ensureIds(scope.series);
scope.series.forEach(function (s) {
chart.addSeries(angular.copy(s), false)
});
chart.redraw()
}, true);
}
}
});