0

我正在创建一个运行良好的图表,但我希望条形图上方显示的值应该具有 $ 值,因此知道如何将美元符号添加到值中。

这是我想要的图表图像,它应该显示 17 美元并且任何值都会出现。 在此处输入图像描述

这是我的 HTML 代码

   <!DOCTYPE HTML>
   <html> 
   <head>
   <title>Graph 2</title>
   <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
   <script type="text/javascript" src="graph_script.js"></script>
   </head>
   <body>
   <div id="container" style="  height:285px; width:400px;float:left;margin:200px 0 0 335px; position:absolute;">

   </div>

     <script type="text/javascript">


 $(document).ready(function(){   
            var b;
            b=17;
    bb=17.60;
            cc=21;
            a=10; 
            var n=$;
        var chart = new Highcharts.Chart({

     chart: {

    renderTo: 'container',

    defaultSeriesType: 'column'

      },



     xAxis: {

categories: [''],

     title: {

        text: '',

        style: {



           color: '#767575'

        }}

,

labels: {

            align: 'right',



            style: {

                font: 'normal 11px Verdana'

            },

            x: 34,

        }

        },

yAxis: {

                    min: 0,

                   startOnTick: false,

    labels: {

        formatter: function() {

return this.value + '%';            

},

        style: {

           color: '#767575'

        }

     },

     title: {

        text: 'Prevalence rate %',

        style: {

           color: '#767575'

        }

     }



     },
        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true
                }
            }
        },



series: [{

            name: 'Prevalence rate %',


            data: [b]

        }, {

            name: 'Prevalence rate %',

            data: [bb]

        },{

            name: 'Prevalence rate %',

            data: [cc]

        },{

            name: 'Prevalence rate %',

            data: [a]

        }]   

});});


   </script>

   </form>
   </body>
   </html>

这是graph_script.js的链接

http://pastebin.com/FHQYxTsq

4

1 回答 1

0

您可以像这样向系列添加格式化程序:

plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return '$' + this.y ;            
                    }
                }
            }
        },

更新:整个代码应该是这样的;

<!DOCTYPE HTML>
<html> 
    <head>
        <title>Graph 2</title>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="graph_script.js"></script>
    </head>
    <body>
        <div id="container" style="  height:285px; width:400px;float:left;margin:200px 0 0 335px; position:absolute;"></div>

        <script type="text/javascript">

            $(document).ready(function(){   
            var b;
            b=17;
            bb=17.60;
            cc=21;
            a=10; 
            var n=$;
            var chart = new Highcharts.Chart(
            {

            chart: {
                renderTo: 'container',
                defaultSeriesType: 'column'
            },
            xAxis: {
            categories: [''],
            title: {
                text: '',
                style: {
                   color: '#767575'
                }},
            labels: {
                    align: 'right',
                    style: {
                        font: 'normal 11px Verdana'
                    },
                    x: 34,
                }},
            yAxis: {
                    min: 0,
                    startOnTick: false,
            labels: {
                formatter: function() {
                    return this.value + '%';            
            },
            style: {
               color: '#767575'
            }},
            title: {
                text: 'Prevalence rate %',
                style: {
                    color: '#767575'
                }}},
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true,
                        formatter: function() {
                            return '$' + this.y ;            
                        }
                    }
                }
            },
            series: [
                        {name: 'Prevalence rate %', data: [b]}, 
                        {name: 'Prevalence rate %', data: [bb]}, 
                        {name: 'Prevalence rate %', data: [cc]},
                        {name: 'Prevalence rate %', data: [a]}
                    ]
                });
            });

        </script>
    </body>
</html>
于 2013-04-20T07:07:00.603 回答