1、Bootstrap框架图标的展示
饼图的数据展示界面效果如下所示
image
柱状图以及其他曲线图展示效果如下所示。
image
使用这些图表功能强，我们一般需要在页面里面引入对应的JS+CSS
image
2、使用脚本动态设置图表的数据
默认的案例，这些数据都是直接绑定在里面的，有时候我们需要动态设置，那么需要分析好对应的数据属性，以及设置的API，才能正常进行显示。
以饼图为例，我们需要分析它的数据结构，一般是Series里面的Data数据格式，不同的图表样式需要的数据结构不太一样，对于图表而已，它的数据格式如下所示。
image
另外也可以使用key、Value方式的定义格式，如下数据所示。
image
那么，有了这些了解，我们就可以通过Ajax方式，动态从数据库里面获取数据，并绑定在界面上显示即可。
首先我们定义好界面上的一个图表展示控件DIV层，如下代码所示。
<div class="tab-char" id="container1" style="height: 300px;max-width:500px"></div>
然后通过JS动态创建对应的图表对象，并设置图表的数据即可。
var chart1 = new Highcharts.Chart({ chart: { renderTo: "container1", plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false,
}, title: { text: '集团分子公司人员组成'
}, tooltip: { pointFormat: '{series.name}: <b>{point.y}</b>'
}, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}, //showInLegend: true
}
}, series: [{ type: 'pie', name: '人员数量', data: []
}]
});动态构建数据是通过Ajax方式实现的，如下所示。
//通过Ajax获取图表1数据
$.ajaxSettings.async = false; var data1 = [];
$.getJSON("/User/GetCompanyUserCountJson", function (dict) {
for (var key in dict) { if (dict.hasOwnProperty(key)) {
data1.push([key, dict[key]]);
}
};
chart1.series[0].setData(data1);
});这里值得注意的是，我们获取一个图表对象，是通过下面代码方式获取才行
var chart1 = new Highcharts.Chart({这种方式可以获得对应的chart1对象，并进行设置图表属性或者调用API接口。
又如对于传入一个数组对象的图表
image
它的动态设置数据的代码如下所示。
var chart4 = new Highcharts.Chart({ chart: { renderTo: 'container4', type: 'column', margin: 75, options3d: { enabled: true, alpha: 15, beta: 15, depth: 50, viewDistance: 25
}
}, title: { text: 'Chart rotation demo'
}, subtitle: { text: 'Test options by dragging the sliders below'
}, plotOptions: { column: { depth: 25
}
}, series: [
{
data: null//[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}
]
}); //模拟动态设置，chartData数据可以通过Ajax动态获取
var chartData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
chart4.series[0].setData(chartData);如果对于柱状图的数据，我们又是需要分析它的数据结构，然后进行相应的数据的
image
柱状图的数据格式大概如下所示。
image
完整的柱状图JS对象处理代码如下所示。
//柱状图的展示
var linechart1 = new Highcharts.Chart({ chart: { renderTo: 'lineContainer1', type: 'column',
}, title: { text: '销售出货日报表'
}, xAxis: { categories: []//['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}, yAxis: { allowDecimals: false, min: 0, title: { text: '销售金额'
}
}, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal;
}
}, plotOptions: { column: { stacking: 'normal'
}
}, series: [ //{
// name: 'John',
// data: [5, 3, 4, 7, 2],
// stack: 'male'
//}, {
// name: 'Joe',
// data: [3, 4, 4, 2, 5],
// stack: 'male'
//}, {
// name: 'Jane',
// data: [2, 5, 6, 2, 1],
// stack: 'female'
//}, {
// name: 'Janet',
// data: [3, 0, 4, 4, 3],
// stack: 'female'
//}
]
});我们上面注释掉的 categories 和 series 数据，就是为了让我们方便通过JS脚本动态添加进去，实现图标数据的动态化设置的。
例如对于销售出货数据的统计，我们模拟的部分数据来进行展示。
//设置数据，这里可以通过JSON获取
var category = ['2018-7-1', '2018-7-2', '2018-7-3', '2018-7-4', '2018-7-5']; var seriesData = [{ name: 'AB', data: [500, 300, 400, 700, 200]
}, { name: 'BC', data: [300, 400, 400, 200, 500]
}, { name: 'CD', data: [200, 500, 600, 200, 100]
}, { name: 'EF', data: [300, 0, 400, 400, 300]
}]; //先移除选来的series对象，然后加入
while (linechart1.series.length > 0) {
linechart1.series[0].remove(true);
} for (var i = 0; i < seriesData.length; i++) { //加入categories
linechart1.xAxis[0].setCategories(category); //加入series
linechart1.addSeries(seriesData[i]);
}通过这样的处理，我们的数据就可以实现动态的显示了。
image
作者：伍华聪_开发框架
链接：https://www.jianshu.com/p/ba78db8d2f6e
随时随地看视频
