• Highcharts


    1. 饼状图(Pie Chart)示例:

    <div id="container" style="height: 400px"></div>
    <script type="http://.....jquery-1.9.1.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'pie',
                plotBackgroundColor: 'lightgrey',
                plotBorderWidth: 2,
                plotShadow: true
            },
            title: {
                text: 'Pie chart'
            },
            colors: ['#7cb5ec','#434348','#90ed7d', 'grey'],
            credits: {
                text: 'Designed by IT Dept.'
            },
            tooltip: {
                pointFormat: '{point.name}:<b>{point.y}</b>',
                headerFormat: ''
           },
            plotOptions: {
                pie: {
                   allowPointSelect: true,
                   cursor: 'pointer',
                   dataLabels: {
                       enabled: true
                   },
                   showInLegend: true
                }
           },
            series: [{
                name: 'Sales',
                data: [['A',29.9], ['B',71.5], ['C',106.4], ['D',129.2]]
            }]
        });
    });
    </script>
    View Code

    效果:

    2. 对于饼状图(Pie Chart),由于数据格式的特殊性,在tooltip中可以使用{point.name}来获取数据的Key值,使用{point.y}来获取数据的Value值;

    饼状图(Pie Chart)的数据格式:

    series: [{
                name: 'Sales',
                data: [['A',29.9], ['B',71.5], ['C',106.4], ['D',129.2]]
            }]

    获取Json格式数据的Key和Value:

    tooltip: {
                pointFormat: '{point.name}:<b>{point.y}</b>',
           headerFormat: '' },

    效果图:

    2. 在饼状图的toolTip中,point.key在headerFormat中可以显示为Key值,但在pointFormat中显示为该key的序号(从0开始);

    3. 

  • 相关阅读:
    旧键盘 (20)
    人口普查(20)
    打印沙漏(20)
    程序运行时间(15)
    反转链表 (25)
    科学计数法 (20)
    组个最小数 (20)
    python yield使用
    python如何优雅判断类型
    python中如何优雅使用import
  • 原文地址:https://www.cnblogs.com/qijiage/p/4171884.html
Copyright © 2020-2023  润新知