Highcharts Y轴标签

时间:2016-06-09 08:50:29

标签: javascript highcharts bar-chart data-visualization axis-labels

这就是我的图表目前的样子: enter image description here

如何将Y轴上的值更改为等于您在工具提示中可以看到的名称,即“其他问题”,我希望此名称代替当前的数值在Y轴上升

这是我的代码:

 function BarChartCategory() {

        var arr =  @Html.Raw(Json.Encode(@ViewBag.Categories));

        console.log(arr);

        var RNames = [], RValues = [], prev;

        //Count how many occurances of each value
        arr.sort();
        for ( var i = 0; i < arr.length; i++ ) {
            if ( arr[i] !== prev ) {
                RNames.push(arr[i]);
                RValues.push(1);
            } else {
                RValues[RValues.length-1]++;
            }
            prev = arr[i];
        }

        console.log(RValues);
        console.log(RNames);

        var final = [];

        for(var i=0; i < RNames.length; i++) {
            final.push({
                name: RNames[i],
                y: RValues[i]
            });
        }

        console.log(final);


        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'By Category Results'
            },
            yAxis: {
                allowDecimals: false,

            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.point.y + ' ' + this.point.name.toLowerCase();
                }
            },
            series: [{
                name: "Issues: ",
                colorByPoint: true,
                data: final
            }]
        });
    }

1 个答案:

答案 0 :(得分:4)

我能够找到解决问题的方法,我首先将Yaxis更改为xaxis并添加了一个遍历数组中每个结果的循环

xAxis: {
                allowDecimals: false,

                categories: function(){
                    var data
                    for(var i=0;i< final.length;i++){
                        data.push({
                            categories: final[i].name
                        })
                    };
                    return data;
                }

            }