zoukankan      html  css  js  c++  java
  • 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. 

  • 相关阅读:
    poj 1860 Currency Exchange(最短路径的应用)
    poj 2965 The Pilots Brothers' refrigerator
    zoj 1827 the game of 31 (有限制的博弈论)
    poj 3295 Tautology (构造法)
    poj 1753 Flip Game(枚举)
    poj 2109 (贪心)
    poj 1328(贪心)
    Qt 对单个控件美化
    Qt 4基础
    Bash Shell
  • 原文地址:https://www.cnblogs.com/qijiage/p/4171884.html
Copyright © 2011-2022 走看看