javascript - 带有标签的 Highcharts 错误

Question

以下 javascript 使用 highcharts.js 库生成有效的 xy 散点图。然而，x 轴标签正在做一些奇怪的事情。 x 轴标签应分别为 0% 到 100% 之间的百分比。他们对每个标签都这样做，除非标签有 x 值。

例如:

data: [
{x:84.3,y:123758,name:'University of New Hampshire'},
{x:77,y:127542,name:'New England School of Law'},
{x:79.7,y:131958,name:'Northeastern University'},
{x:76,y:116852,name:'Roger Williams University'},
{x:75.8,y:135160,name:'Suffolk University'},
]

在图表上，76% 的标签上写着“罗杰威廉姆斯大学”而不是 76%。

有什么建议吗？

所有代码:

$(document).ready(function() {

var pre1,pre2;
$('#tuitionVbar').highcharts({
    chart: {
        type: 'scatter',
        zoomType: 'xy',
        height:500,
        events: {
            load: function () {
                var chart = this;
                var dis_class;
                $(chart.series).each(function (i, series) {
                        if("passing_85" == series.name){
                            series.name = 'Bar Pass Rate ≥ 85%';
                        }
                        if("passing_75" == series.name){
                            series.name = 'Bar Pass Rate 75% - 84.9%';
                        }
                        if("passing_60" == series.name){
                            series.name = 'Bar Pass Rate 60% - 74.9%';
                        }
                        if("passing_0" == series.name){
                            series.name = 'Bar Pass Rate < 60%';
                        }
                    $('<li class="'+dis_class+'" style="color:#FFF;font-weight:400;padding:3px;cursor:pointer;background-color: ' + series.color + '">' + series.name + '</li>').click(function () {
                        $(this).toggleClass("linethrough");
                        series.visible ? series.hide() : series.show();
                    }).appendTo('#legend');
                });
            }
        }
    },
    title: {
        text: 'Total Tuition Paid vs. Bar Pass Rate for 2014 Graduates'
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'Bar Pass Rates in 2014'
        },

        type:'category',
        startOnTick: false,
        endOnTick: false,
        tickInterval:1,
        showLastLabel: true,
        max:100,
        labels: {
                formatter: function(){
                    if(this.value > 0){
                        return this.value + "%";
                    }else{
                        return this.value;

                    }
                }
        },
    },
    yAxis: {
        title: {
            text: 'Total Tuition Paid'
        },min:0,max:200000,
        labels: {
                formatter: function(){
                    return '$' + Math.round(this.value/1000) + "k";
                }
        },
        endOnTick:false
    },
    legend: {
        enabled:false,
        layout: 'vertical',
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
        borderWidth: 1
    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            }
        }
    },
    tooltip: {
        useHTML:true,
        formatter: function () {
            return '<b>' + this.point.name + '</b><br>Total Tuition: $' + Math.round(this.y/1000) + 'k<br>Bar Pass Rate: ' + this.x + '%';
        }
    },
    series: [
    {
        name: 'passing_85',
        marker: {
            symbol: 'circle'
        },
        color: 'rgba(124, 181, 236, 0.85)',
        data: [
            {x:90.9,y:135532,name:'Boston College'},
            {x:92.8,y:137142,name:'Boston University'},
            {x:89.7,y:72950,name:'University of Connecticut'},
            ]
    },
    {
        name: 'passing_75',
        marker: {
            symbol: 'circle'
        },
        color: 'rgba(252,186,63,1)',
        data: [
            {x:84.3,y:123758,name:'University of New Hampshire'},
            {x:77,y:127542,name:'New England School of Law'},
            {x:79.7,y:131958,name:'Northeastern University'},
            {x:76,y:116852,name:'Roger Williams University'},
            {x:75.8,y:135160,name:'Suffolk University'},
            ]
    },
    {
        name: 'passing_60',
        marker: {
            symbol: 'circle'
        },
        color: 'rgba(255,19,0,.7)',
        data: [
            {x:73.1,y:121482,name:'Western New England University School of Law'},
            {x:64.9,y:72534,name:'University of Massachusetts Dartmouth'},
            ]
    },
    ]
});
});

Answer 1

你难道不知道吗——在提交这篇文章后不到两分钟(找了几个小时之后)，我就解决了这个问题。

If the xAxis.type is set to category, and no categories option exists, the category will be pulled from the point.name of the last series defined.

http://api.highcharts.com/highcharts#series%3Cscatter%3E.data

为了解决这个问题，我从上面的代码中删除了“type:'category',”。