HighCharts

Highcharts 使开发人员能够在其网页中轻松设置交互式图表。

中文网站

入门指南

Highcharts 依赖于 jquery，因此您可以在您的 HTML 页面中导入它们：

<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
  • 创建容器
<div id="highchart-container" style="min-width:800px;height:400px"></div>
  • 使用 Highcharts
$(function () {
    $('#highchart-container').highcharts({
        chart: {
            type: 'bar'                           
        },
        title: {
            text: '我的第一个图表'                 
        },
        xAxis: {
            categories: ['苹果', '香蕉', '橙子']   
        },
        yAxis: {
            title: {
                text: 'something'                 
            }
        },
        series: [{
            name: '小明',                          
            data: [1, 0, 4]                        
        }, {
            name: '小红',
            data: [5, 7, 3]
        }]
    });
});

然后，您可以看到：