HighCharts之2D金字塔图

来源：互联网发布：广州数控g71编程实例编辑：程序博客网时间：2024/05/16 16:13

HighCharts之2D金字塔图

1、实例源码

Pyramid.html：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HighCharts 2D金字塔图</title><script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script><script type="text/javascript" src="../scripts/js/highcharts.js"></script><script type="text/javascript">$(function(){ $('#pyramidChart').highcharts({ chart: {            type: 'pyramid',            marginRight: 100        },        title: {            text: '金字塔分布图',            x: -50        },        plotOptions: {            series: {                dataLabels: {                    enabled: true,                    format: '<b>{point.name}</b> ({point.y:,.0f})',                    color: 'black',                    softConnector: true                }            }        },        legend: {            enabled: false        },        series: [{            name: '人数',            data: [                ['星期一',12],                ['星期二',121],                ['星期三',265],                ['星期四',22131],                ['星期五',623231],                ['星期六',5545459],                ['星期日',51245125]            ]        }]    });  });</script></head><body>   <div id="pyramidChart" style="width: 1200px; height: 500px; margin: 0 auto"></div></body></html>

2、实例结果

1 0