注意:highchart的series的data属性的 y 的值必须为数字(其他对应的类似 如: name为字符串)
步骤:
1 后台返回对应的json数据
2 在html中,加上容器
<div id="reportingRate" style="min-width: 310px; height: 460px; margin: 0 auto"></div>
3 js中,格式化json数据为,series需要的data
$.ajax({ url:'', type:'post', dataType:'json', data:{}, success:function (data) { var jsondata = []; for (var i in data) { jsondata.push({ name: data[i].name, y: parseFloat(data[i].y)// 此处为重点(y对应的值必须为数字,而不是字符串) }); } formatReportRate(jsondata);// 格式化HighChart } });4 HighChart格式化函数
function formatReportRate(seriesData){ Highcharts.chart('reportingRate', { chart: { type: 'column' }, title: { text: '' }, credits: { enabled: false }, /*subtitle: { text: '点击可查看具体的版本数据,数据来源: <a href="https://netmarketshare.com">netmarketshare.com</a>.' },*/ xAxis: { type: 'category' }, yAxis: { title: { text: '百分比' } }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true, format: '{point.y:.1f}%' } } }, tooltip: { headerFormat: '<span style="font-size:11px">{series.name}</span><br>', pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>' }, scrollbar: { enabled: true }, series: [{ name: '单位', colorByPoint: true, data:seriesData }], }); }