如何使用jQuery Highcharts在饼图中显示值而不是百分比 [英] How to display the value instead of percentage in a pie chart using jquery Highcharts

问题描述

对于我使用jQuery Highcharts制作的饼图字符的项目。我喜欢做的是显示我插入的价值，而不是亲子关系。例如：图表显示了firefox - 43.269 ...％，而我喜欢显示Firefox -45点击的值。谁能帮我这个。提前致谢。

图表代码

 <！ -  1.添加这些JavaScript包含在页面的头部 - > 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js>< / script> 
< script type =text / javascriptsrc =../ js / highcharts.js>< / script> 
 
 <！ -  1a）可选：添加主题文件 - > 
<！ -  
< script type =text / javascriptsrc =../ js / themes / gray.js>< / script> 
  - > 
 
 <！ -  1b）可选：导出模块 - > 
< script type =text / javascriptsrc =../ js / modules / exporting.js>< / script> 
 
 
 <！ -   -  2.添加JavaScript以在文档准备好时初始化图表 - > 
< 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：'在特定网站浏览器市场份额，2010'
}，
 tooltip：{
 formatter：function（）{
 return'< b>'+ this.point.name +'< / b>：'+ this.percentage +'％'; 
} 
}，
 plotOptions：{
 pie：{
 allowPointSelect：true，
 cursor：'pointer'，
 dataLabels：{
启用：true，
 color：'＃000000'，
 connectorColor：'＃000000'，
 formatter：function（）{
 return'< b>'+ this.point.name +'< ; / b>：'+ this.percentage +'点击'; 
} 
} 
} 
}，
系列：[{
类型：'pie'，
名称：'浏览器共享'， 
 data：[
 ['Firefox'，45]，
 ['IE'，26]，
 ['Chrome'，12]，
 ['Safari '，8]，
 ['Opera'，6]，
 ['Others'，7] 
] 
}] 
}）; 
}）; 
 
< / script> 
 
< / head> 
< body> 
 
 <！ -   -  3.添加容器 - > 
< div id =browser_cartstyle =width：800px; height：400px; margin：0 auto>< / div> 
 
 
< / body> 
  

解决方案

工具提示选项 p>

• Highcharts Options工具提示参考

示例： strong>

• highcharts demo
  

来源：

• highslide.com/forum
  

for a project of mine im using a pie char that made with jQuery Highcharts. what like to do is to display the value i inserted instead of the the parentage. example: chart shows firefox - 43.269...% instead i like to show the value Firefox -45 clicks. can anyone help me with this. thanks in advance.

Chart code

<!-- 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>

解决方案

Tooltip options

• Highcharts Options Reference for Tooltip

Example:

• highcharts demo

Source:

• highslide.com/forum

这篇关于如何使用jQuery Highcharts在饼图中显示值而不是百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！