ZoomRange Highstock工作不正确吗? [英] ZoomRange Highstock works not correct?

问题描述

我制作了一张Highstock图表，并在yAxis上缩放时遇到了问题. 我有一个Button和2文本字段来获取所需的轴的最小/最大值.最小为0，最大为100时效果很好.如果使用min:0，max:80，则不会(在图表中max仍为100). 如果我使用鼠标进行缩放，则效果很好(即使最小值为3.7，最大值也可能为3.894).但是，使用鼠标不是一种选择，因为在以后的Diagramm中，将有3个yAxes进行单独缩放.

I made a Highstock diagramm and got aproblem with zooming on the yAxis. I have a Button and 2 textfield to get the wanted min/max values for the axis. With min:0, max: 100 it works well. With min:0, max:80 it doesn't (max will still be 100 in the Diagramm). If I use the mouse for zooming it works well (even a min of: 3.7 and a max of 3.894 is possible). But using the mouse is not an Option, because in the later Diagramm there will be 3 yAxes with individual zoom.

$(function () {
var seriesOptions = [],
    seriesCounter = 0,
    names = ['MSFT', 'AAPL', 'GOOG'];

/**
 * Create the chart when all data is loaded
 * @returns {undefined}
 */
function createChart() {

    $('#container').highcharts('StockChart', {
        rangeSelector: {
            selected: 4
        },
        chart:{
            zoomType: 'xy'
        },
        yAxis: [
        {
            labels: {
               format: '{value}',
            },
            height: '100%',
            opposite: false,
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },
        ],

        plotOptions: {
            series: {
                compare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: seriesOptions
    },
    function(chart){

        $('#btn').click(function(){
            var min = temp_min.value,
                max = temp_max.value;
            chart.yAxis[0].setExtremes((min),(max)); 
        });

    });
}

$.each(names, function (i, name) {

    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?',    function (data) {
                    if(seriesCounter==0){            
            seriesOptions[i] = {
            name: name,
            data: data,
            yAxis: 0
            };
        } else {
           seriesOptions[i] = {
            name: name,
            data: data,
            yAxis: 0
            };
        }



        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seriesCounter += 1;

        if (seriesCounter === names.length) {
            createChart();
        }
    });
});

});

JSFiddle

另一个问题:是否可以为yAxis设置滚动条? 谢谢您的帮助，帕特里克

Another Question: Is it possible to set up a scrollbar for the yAxis as well? Thanks for your help, Patrick

推荐答案

这与tickInterval不规则，因此将其四舍五入为值(例如100)有关.解决方案是使用tickPositioner，它根据您定义的极限来计算报价.

This is related with fact that tickInterval is not regular, so is rounded to value (like 100). The solution is using tickPositioner which calculates ticks, based on extremes which you define.

tickPositioner: function (min,max) {
            var positions = [],
                tick = Math.floor(min),
                increment = Math.ceil((max - min) / 5);

            for (tick; tick - increment <= max; tick += increment) {
                positions.push(tick);
            }
            return positions;
        },

http://jsfiddle.net/6s11kcwd/

只有xAxis支持滚动条.

The scrollbar is supported only for xAxis.

这篇关于ZoomRange Highstock工作不正确吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！