Highcharts应用--动态玫瑰图

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

现有一个需求,用玫瑰图的方式,显示不同行业的某个贷款规模占所有贷款规模的比例

highcharts条形图中没有提供显示百分比的API,只有百分比堆叠柱状图和饼图可以显示,调用的接口是this.percentage,普通的柱状图和条形图想要显示百分比需要调用formatter格式化输出百分比。

$('#container-rose').highcharts({
    chart: { polar: true, type: 'column' },
    title: { text: '本支行XX贷款规模区间不同行业的贷款企业数量及占比' },
    legend: { enabled: false },
    xAxis: {
        tickmarkPlacement: 'on',
        categories: ['教育', '批发和零售业', '房地产业', '公共管理、社会保障和社会组织', '农、林、牧、渔业', '住宿和餐饮业', '制造业', '国际组织', '科学研究和技术服务业', '采矿业', '卫生和社会工作']
    },
    yAxis: {
        title: {
            text: '行业 (数量/百分比)'
        },
        min: 0,
        labels: {
            formatter: function (){
                return this.value + '个';
            }
        }
    },
    tooltip: {
        formatter: function () {
            a = this.y/this.point.stackTotal*100;
            return '' + this.x + '
' + this.series.name + ': ' + this.y + '个 (' + a.toFixed(2) + "%)"; } }, plotOptions: { series: { groupPadding: 0, pointPlacement: 'on', stacking: 'normal' } }, series: [ { name: '1000+', data: [11, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12] }, { name: '500-1000', data: [11, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12] }, { name: '300-500', data: [11, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12] }, { name: '200-300', data: [12, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12] }, { name: '100-200', data: [13, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12] }, { name: '50-100', data: [14, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12] }, { name: '0-50', data: [15, 12, 15, 21, 24, 35, 16, 18, 25, 24, 12] } ] });

你可能感兴趣的:(JavaScript,highcharts)