HighChart Graph在Xaxis上对齐错误..无法在JSFiddle上重现

时间:2014-07-08 05:58:55

标签: javascript jquery html highcharts

我是Jquery的初学者。我有一个高图图表。其中的数据在Xaxis中显示一列后面。

我想在jsFiddle中重现我的图表..我从beloe Graph中获得了帮助

Refered Graph

这是我的代码:

$(function () {  
var highOptions = {

        chart: {
            type: 'line',
            renderTo: 'container2',
            zoomType: 'x',
            marginTop: 100

        },

        title: {
            text: 'Score'
        },

        subtitle: {
            text: '  '
        },

        xAxis: {
            title: {
                text: 'XXX'
            },
            categories: [],
            labels: {
                rotation: 45,
                step: 1,
                y: 30
            }
        },

        yAxis: [{ // left y axis
            title: {
                text: 'XXX'
            },
            min: 0,
            max: 9,
            plotLines: [{
                value: 7.5,
                color: '#ff0000',
                width: 2,
                zIndex: 4,
                label: { text: 'XXX' }
            }]
        }],

        plotOptions: {
            column: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return Highcharts.numberFormat(this.y, 1);
                    }
                }
            }
        },
        legend: {
            align: 'left',
            verticalAlign: 'top',
            y: 20,
            floating: true,
            borderWidth: 0
        },

        tooltip: {
            shared: true,
            crosshairs: true
        },
        series: []
    };

         var unibiki = [] ;
         unibiki.push("Fin");
         unibiki.push("Chi");
         unibiki.push("G_F");
         unibiki.push("G_I");
         unibiki.push("G_F");
         unibiki.push("F_F");
         unibiki.push("l_G");
         unibiki.push("F_Fi");
         unibiki.push("l_G");
         unibiki.push("F_I");
         unibiki.push("I_I");

        var soft =[];

        var soft1=[];

        soft1.A="XXL"   
        soft1.City="XXlu"   
        soft1.C="XXnd"  
        soft1.E0="0"    
        soft1.E1="2"    
        soft1.E2="1"    
        soft1.E3="2"    
        soft1.E4="1"    
        soft1.E5="0"    
        soft1.E6="0"    
        soft1.E7="0"    
        soft1.E8="0"    
        soft1.E9="0"    
        soft1.E10="0"   
        soft1.XXScore="4"   
        soft1.XXScore="1"   
        soft1.Median="3"    
        soft1.NoOfRespondents="6"   
        soft1.OldCountry        
        soft1.OldSWVer      
        soft1.PercentageResponses="75"  
        soft1.Program="XXS" 
        soft1.SurveyDate="XX06" 
        soft1.Rd=2.33   
        soft1.A="0.1.0" 
        soft1.UserBase="8"  

        soft.push(soft1);

     highOptions.xAxis.categories = [0.1.0,0.2.0,0.3,0.4,0.5,0.6,0.7,0.8];

    highOptions.subtitle.text = "XXX:";
    chart = new Highcharts.Chart(highOptions);

 for (var x = 0; x < unibiki.length; x++) {

        newLP = [];

        var aName = unibiki[x];
        for (i = 0; i < soft.length; i++) {
            if (unibiki[x] == soft[i].A + "_" + soft[i].C) {
                newLP.push([soft[i].A, parseFloat(soft[i].Rd)]);

            }
        }

        chart.addSeries({
            name: aName,
            data: newLP
        }, false);
    }
       });

这是我的图表

My Graph JSfiddle

我的数组正确加载我运行JSHint ..它说某些变量没有定义..我做了那个..仍然无法看到图形。 需要一些建议。 任何建议都会有帮助

3 个答案:

答案 0 :(得分:1)

它表示&#34;意外数字&#34;在控制台中。修复以下行中的前两个数字:

highOptions.xAxis.categories = [0.1.0,0.2.0,0.3,0.4,0.5,0.6,0.7,0.8];

答案 1 :(得分:0)

问题在

highOptions.xAxis.categories = [0.1.0,0.2.0,0.3,0.4,0.5,0.6,0.7,0.8];

将其更新为

highOptions.xAxis.categories = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8];

JSFiddle

答案 2 :(得分:0)

在解决了您的数据问题后,在添加系列之后不要忘记致电chart.redraw()http://jsfiddle.net/u9xES/546/

for (var x = 0; x < unibiki.length; x++) {

    newLP = [];

    var aName = unibiki[x];
    for (i = 0; i < soft.length; i++) {
        if (unibiki[x] == soft[i].A + "_" + soft[i].C) {
            newLP.push([soft[i].A, parseFloat(soft[i].Rd)]);

        }
    }

    chart.addSeries({
        name: aName,
        data: newLP
    }, false);
}
chart.redraw(); // redraw chart