Question

在上图中，如果值在x轴14到-14和y轴1到-1之间，那就完美了。

当值超出x轴14到-14和y轴1到-1时，它不是绘图。

这里我创建了图表，所有点都没有绘图

$(function () {
new Highcharts.Chart({
    chart: {
        type: 'scatter',
        renderTo: 'container',
        showAxes: true
    },
    xAxis: {
        tickInterval: 2,
        min: -14,
        max: 14,
        tickLength: 0,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]
    },
    yAxis: {
        tickInterval: 0.2,
        min: -1,
        max: 1,
        gridLineWidth: 0,
        lineWidth: 1,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]
    },
    series: [{
        data: []
    }]
}, function (chart) {

    var xData = [1, 2, 3, 4, 5, 10],
        yData = [0.5356899, -20.5356899, 0.6356899,
                 0.2356899, 0.3356899, 40.1356899],
        series = chart.series[0],
        i = 0;

    setInterval(function () {
        var shift = series.data.length > 20,
            x = xData[i],
            y = yData[i];

        if (!x || !y)
            return;

        series.addPoint([x, y], true, shift);
        i++;
    }, 1000);


    var renderer = chart.renderer,
        xAxis = chart.xAxis[0],
        yAxis = chart.yAxis[0],
        step = 2 * Math.PI / 72,
        theta = 0,
        d = ['M'],
        h = 0,
        k = 0,
        r = 1,
        x,
        y;

    for (;  theta < 2*Math.PI; theta += step) {
        x = h + 10 * r * Math.cos(theta);
        y = k - 0.5 * r * Math.sin(theta);

        d.push(xAxis.toPixels(x), yAxis.toPixels(y), 'L');
    }

    d[d.length - 1] = 'Z';

    renderer.path({
        d: d,
        stroke: 'red',
        strokeWidth: 2
    }).add();
});

}）;

Answer 1

这是因为您在X轴和Y轴上都绑定了最小值和最大值。

替换此部分代码

xAxis: {
        tickInterval: 2,
        min: -14,
        max: 14,
        tickLength: 0,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]
    },
    yAxis: {
        tickInterval: 0.2,
        min: -1,
        max: 1,
        gridLineWidth: 0,
        lineWidth: 1,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]

有了这个

xAxis: {
        tickInterval: 2,
        tickLength: 0,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]
    },
    yAxis: {
        tickInterval: 0.2,
        gridLineWidth: 0,
        lineWidth: 1,
        plotLines: [{
            value: 0,
            width: 1,
            color: '#999'
        }]

Answer 2

这是由设置xAxis和yAxis的最小值和最大值引起的。您需要使用chart.x / yAxis.setExtremes（）函数来设置新的极值并绘制新的（或更新旧的）椭圆。

Highchart自动缩放

2 个答案: