【问题标题】:How to display the value instead of percentage in a pie chart using jquery Highcharts如何使用jquery Highcharts在饼图中显示值而不是百分比
【发布时间】:2011-12-18 15:48:36
【问题描述】:

对于我的一个项目,我使用 jQuery Highcharts 制作的饼图。要做的是显示我插入的值而不是父母。示例:图表显示 Firefox - 43.269...% 而我喜欢显示值 Firefox -45 点击。谁能帮我这个。提前致谢。

图表代码

<!-- 1. Add these JavaScript inclusions in the head of your page -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="../js/highcharts.js"></script>

    <!-- 1a) Optional: add a theme file -->
    <!--
        <script type="text/javascript" src="../js/themes/gray.js"></script>
    -->

    <!-- 1b) Optional: the exporting module -->
    <script type="text/javascript" src="../js/modules/exporting.js"></script>


    <!-- 2. Add the JavaScript to initialize the chart on document ready -->
    <script type="text/javascript">

        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'browser_cart',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: 'Browser market shares at a specific website, 2010'
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' clicks';
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Browser share',
                    data: [
                        ['Firefox',   45],
                        ['IE',       26],
                        ['Chrome',   12], 
                        ['Safari',    8],
                        ['Opera',     6],
                        ['Others',   7]
                    ]
                }]
            });
        });

    </script>

</head>
<body>

    <!-- 3. Add the container -->
    <div id="browser_cart" style="width: 800px; height: 400px; margin: 0 auto"></div>


</body>

【问题讨论】:

标签: javascript jquery highcharts


【解决方案1】:

已修复,只是在下面一行更改

  format: '<b>{point.name}</b>: {point.percentage:.1f} %',

  format: '<b>{point.name}</b>: {point.y:.1f} Rs.',

【讨论】:

  • 如果我想对数字使用 int 类型?我的意思是,这是可行的,但是使用 250.0、77.0 等。我想要 77、250。有帮助吗?
  • 你可以试试这个format: '&lt;b&gt;{point.name}&lt;/b&gt;: {point.y:.0f} Rs.',而不是。
  • 这对我有用 pointFormat: '{series.name}: {point.y:,.0f}'
【解决方案2】:
return '<b>'+ this.point.name +'</b>: '+ this.y +' clicks';

【讨论】:

    【解决方案3】:

    在这种情况下,您可以将“this.percentage”替换为“this.point.y”

    查看格式化程序:(旧链接已删除),新链接 - https://api.highcharts.com/highcharts/tooltip.formatter

    【讨论】:

    • 再次检查,我可能错误地投了反对票。该链接正在运行。我为此道歉。再次投票。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多