jquery - 使用 Jquery HighChart 在条形图中附加带有值的字符串

Question

我想用highchart创建自定义条形图...请帮助我..这是我的代码..

$(function () {
    var chart;

    var datasety = ["55","27","63","54","35"];

    for(i=0;i<datasety.length;i++)
    {
        datasety[i] = parseFloat(datasety[i]);

    }

    var datasetx = new Array(); 
    datasetx = ['aa','bb','cc','dd','ee'];


    $(document).ready(function() {

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                margin: [ 50, 50, 100, 80]
            },
            title: {
                text: 'World\'s largest cities per 2008'
            },
            xAxis: {
                categories: datasetx,
                labels: {
                    enabled: false,
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population (millions)'
                }   

            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
                        ' millions';
                }
            },
            series: [{
                name: 'Population',
                data: datasety,


                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            }]
        });

});

});

Answer 1

你可以试试这个使用......

chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            margin: [ 50, 50, 100, 80]
        },
        title: {
            text: 'World\'s largest cities per 2008'
        },
        xAxis: {
            categories: datasetx,
            labels: {
                enabled: false,
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)'
            }   

        },
        plotOptions:{ // for different color of bar
            series:{ colorByPoint: true}
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
                    ' millions';
            }
        },
        series: [{
            name: 'Population',
            data: datasety,

            dataLabels: {
                formatter:function(){   // for format value 
                    return 'USD'+this.y
                    },
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });

Answer 2

这里的代码工作：http: //jsfiddle.net/GCecu/

$(function () {

和

$(document).ready(function() {

是一回事。删除第二个，$(document).ready(function() {，您的代码可能会起作用。

---

此外，您还有语法错误。

series: [{
            name: 'Population',
            data: datasety,


                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                x: 4,
                y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            } <--- EXTRA, delete it
        }]