如何使用highcharts-ng和angularjs绘制多个highcharts
How to draw multiple highcharts using highcharts-ng and angularjs
我在我的应用程序中使用了highcharts-ng和angular js。对于一个简单的案例,我可以调用一个休息服务并能够使用它绘制图形。但是在我的场景中,使用相同的表单输入,我需要调用两个休息服务,并根据两个响应同时绘制两个图表(即第一个具有第一个响应的图形和具有另一个响应的第二个图形)。 我尝试了一些情况,但我只能绘制一个图形,如果我尝试绘制另一个图形,整个页面将重置。关于如何做到这一点的任何帮助。
这是我
解决您问题的方式。我没关系。
首先:在服务中创建绘制图
angular.module('chartApp')
.factory('drawChart', function () {
return {
lineChart: function (args) {
// Draw charts
var charts = [],
chart;
// agrs: this is variable mutable
var maps = args.maps,
color = args.color,
width = args.width,
height = args.height,
lablesY = args.lablesY,
lablesX = args.lablesX,
title = args.title;
angular.forEach(maps, function (map) {
chart = {
animation: true,
options: {
legend: {
enabled: false
}
},
title: title,
series: [{
data: map,
enableMouseTracking: false,
color: color,
marker: {
enabled: false
}
}],
loading: false,
yAxis: {
currentMin: 0,
currentMax: 100,
lineColor: '#cacaca',
lineWidth: 1,
gridLineWidth: null,
labels: lablesY,
title: null
},
xAxis: {
currentMin: 0,
labels: lablesX,
lineColor: '#cacaca',
lineWidth: 1,
tickWidth: 0
},
size: {
width: width,
height: height
}
};
charts.push(chart);
});
return charts;
}
};
});
第二次调用控制器
// Draw charts
var chartArgs = {
maps: $scope.maps,
color: '#0ec679',
width: 245,
height: 125,
lablesY: {
enabled: false,
},
lablesX: {
enabled: false,
},
title: {
text: ''
}
};
if (Object.keys($scope.maps).length != 0) {
$scope.chartMaps = drawChart.lineChart(chartArgs);
}
第三在视野中
<highchart config="chartMaps[$index]"></highchart>
这是我的解决方案:
Javascript:
// first chart
$scope.chartConfig1 = {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
}, ...
};
// second chart
$scope.chartConfig2 = {
chart: {
type: 'line'
},
title: {
text: 'Fruit Consumption'
}, ...
};
.HTML:
<!-- first chart -->
<div id="chartA">
<highchart id="chart1" config="chartConfig1"></highchart>
</div>
<!-- second chart -->
<div id="chartB">
<highchart id="chart2" config="chartConfig2"></highchart>
</div>
你可以无限期地重复这个范式
相关文章:
- 将数据从JSP传递到jQuery并在Highcharts中绘制
- 如何使用highcharts-ng和angularjs绘制多个highcharts
- 如何在 JSON 中使用 X 轴上的两个值在 HighCharts 中绘制
- 浏览器在使用Highcharts绘制超过10000个系列时挂起
- Highcharts - 使用 MySQLi + JSON 获取和绘制数据(逐步)
- 无法在HighCharts中使用外部csv文件绘制饼图
- Highcharts-销毁图例后重新绘制/调整图表大小
- Highcharts不显示数据,而是在从CSV文件读取时绘制图表
- HighCharts:在一个系列中绘制多个线段
- *Highcharts*绘制百分比折线图
- HighCharts:如何在多个轴上绘制一条直线,如具有不同值的固定X轴的plotLines
- Highcharts-重新绘制时停止Y轴值的更改
- 未在Durandal中使用HighCharts绘制VU米轨距图
- 在Highcharts上绘制随时间变化的偶发事件(动态精度?)
- 在Highcharts条形图中绘制自定义条形图
- 让Highcharts重新绘制
- 将JSON文件加载到highcharts中以绘制折线图
- 如何使用Highcharts绘制没有数据绑定的x轴
- Highcharts样条在前30个点不绘制图形线
- 从highcharts中的数组绘制饼状图