使用JavaScript创建Highchart Graph

时间:2014-09-18 12:14:56

标签: javascript jquery html css

我想创建高图表图。

以下是我的代码的 FIDDLE LINK

我给出了两个值a和b。 a表示y轴的x轴b。问题是当我给出a和b的值时。当a和b之间的差值较小时,则不会出现图形 I-E。 a = -9,b = -9。否则它可以工作

$(function () {
    var a, b, x, j;
    a = -9;
    b = -9;

    if (a > b) {
        x = a;
        j = b
    } else {
        x = b;
        j = a
    }


    alert("X is " + x);
    alert("Y is" + j);



    $('#container').highcharts({
        chart: {
            type: 'bar',
            backgroundColor: null
        },
        credits: {
            enabled: false
        },
        tooltip: {
            enabled: false,
        },

        title: {
            text: ''
        },
        xAxis: {
            categories: ["", "", ""],
            //minTickInterval:20000,
        },
        yAxis: {
            min: j - (j * 5 / 100),
            max: x + (x * 5 / 100),

            //min: -50,
            //max: -50,


            //minTickInterval:20000,
            endOnTick: true,
            tickPixelInterval: 340,
            maxPadding: 0.25,
            title: {
                text: ''
            },
            labels: {

                formatter: function () {
                    if (j - (j * 5 / 100) > 1000000) {
                        return Highcharts.numberFormat((this.value) / 1000000, 0, '', ',') + 'M';
                    } else if (j - (j * 5 / 100) > 1000) {
                        return Highcharts.numberFormat((this.value) / 1000, 0, '', ',') + 'K';
                    } else {

                        return Highcharts.numberFormat((this.value), 0, '', ',');


                    }
                },
                x: 6
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: ' ',
            data: [a]
        },

        {
            name: ' ',
            data: [0, b]
        }, ]
    });
});

1 个答案:

答案 0 :(得分:0)

这是一个有效的fiddle

只需删除:

min: j-(j*5/100),
max: x+(x*5/100)
来自yAxis: { --- some options --- }

positivenegative使用一个值a和其他b也可以尝试此操作。

希望这有帮助。