高图表:y 轴类别被推离图表区域,不适合

HighChart: y axis categories are pushed off chart area, don't fit

本文关键字:区域 不适合 高图表      更新时间:2023-09-26

我有这个jsfiddle来说明我的问题:http://jsfiddle.net/qner9hwc/1/

每当您添加没有最高整数值的序列时,无论是在底部还是中间的某个地方,顶部值都会被推离图表区域,或者类别根本不适合图表区域。

类别是动态添加的,并且需要整数值。我让它们按升序排序。

试试这个用例:

添加一个系列"10",然后是"5"(你会在这里看到我的问题),然后添加"15",它会自行纠正

$('#addSeries').on('click', function () {
    //first check if value is already a series
    var seriesid = document.getElementById('txtValue').value;
    getSeriesIDIndex(seriesid, function (idindex) {
        //if it doesnt exist, add it to chart
        if (idindex == -1) {
            categories.push(parseInt(seriesid));
            categories = categories.sort(sortNumber);
            console.log(categories);
            chart.yAxis[0].setCategories(categories, false);
            getCategoryIndex(parseInt(seriesid), function (cindex) {
                chart.addSeries({
                    name: seriesid,
                    data: [{
                        x: currentDate.getTime(),
                        y: cindex
                    }]
                }, false);
                for (i = 0; i < chart.series.length; i++) {
                    var cur_series = chart.series[i];
                    var cur_cindex;
                    getCategoryIndex(chart.series[i].name, function (cindex) {
                        cur_cindex = cindex;
                    });
                    for (var z = 0; z < cur_series.data.length; z++) {
                        if (cur_series.data[z].y >= cindex && cur_series.name !== seriesid) {
                            console.log('change!' + cur_series.data[z].y);
                            cur_series.data[z].y = cur_cindex;
                        }
                    }
                }
                console.log(chart.yAxis[0].categories);
                chart.redraw();
            });

        }
    });
});

这一行可以解决您的麻烦:

cur_series.data[z].y = cur_cindex;

正确的代码:

cur_series.data[z].update(cur_cindex, false);

您只更新值,而您应该使用 point.update() 来更新点。演示:http://jsfiddle.net/qner9hwc/2/