Question

下面的jsfiddle在功能上正常工作，但是添加新的刻度线太靠近Y轴，所以想知道是否有办法显示下两个/三个/ 10个间隔（无论单位，秒，分钟...... 。）将来在X轴和Y轴上只保留当前时间（像往常一样）

就像使用导航器一样，用户可以返回，因此使用导航器窗格，用户可以及时向前浏览，并可以看到一些标记为X轴绘图带的事件会发生吗？

我这将使图表对用户更有用，当前时间和刻度将更加明显。

是否可以在HighCHarts中使用？

http://jsfiddle.net/amonga141/6u8q9kgp/1/

    // Some styling options for yAxis
Highcharts.theme = {
    yAxis: {
        gridLineWidth: 1,
        gridLineColor: "rgb(240, 240, 240)",
        minorGridLineColor: 'rgba(255, 255, 255, 0.07)',
        lineColor: "rgb(241, 141, 5)",
        lineWidth: 1,
        tickColor: "rgb(241, 141, 5)",
        tickWidth: 1,
        showEmpty: false,
        labels: {
            format: '{value:.5f}',
            style: {
                color: 'rgb(102, 102, 102)',
                fontWeight: 'bold'
            }
        },
        title: {
            style: {
                color: 'rgb(229, 64, 40)',
                font: "bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif"
            }
        }
    }
};

// Apply the styling options
Highcharts.setOptions(Highcharts.theme);

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

// Data generator helper
function data(start, end, samples, min, max) {
    var temp = [];
    var range = ~~ ((end - start) / samples);
    for (var i = 1; i < samples; i++) {
        temp.push([start.getTime() + range * i, min + Math.random() * (max - min)]);
    }
    return temp;
}

// 
var tooltipSuffix ='<br> TTIP Sufix:Suffix';
// Create a timer
var now = new Date();
var start = new Date(now - 60000);

var example_data = [{
    name: 'Signal 1',
    data: data(start, now, 20, 1.55478, 1.55481),
    yAxis: 0
}, {
    name: "Signal 2",
    data: data(start, now, 20, 1.32419,  1.13253),
    yAxis: 1
}, {
    name: "Signal 3",
    data: data(start, now, 20, 0.97456, 0.97545),
    yAxis: 2
}];

//////////////////////
// Chart definition //
//////////////////////
var chart = $("#chart").highcharts({
    legend: {
        enabled: true
    },
    chart: {
        animation: Highcharts.svg,
        events: {
            load: function () {
                // set up the updating of the chart each second
                var chart = this,
                    series = chart.series;

                setInterval(function () {
                    var x = new Date(); // current time

                    series[0].addPoint(data(x, x, 2, 1.55678, 1.59133)[0], false, true);
                    series[1].addPoint(data(x, x, 2, 1.33456, 1.39921)[0], false, true);
                    series[2].addPoint(data(x, x, 2, 0.95989, 0.99092)[0], false, true);

                    chart.redraw();
                }, 2000);
            }
        }
    },
   yAxis: [ {
        valueDecimals: 5,
        opposite: false,
        showRects: true,
        offset: 40,
        title: {
            text: 'Scale 1'
        }
    }, { valueDecimals: 5,
        opposite: true,
        showRects: true,
        offset: 90,
        title: {
            text: 'Scale 2'
        }
    }, { valueDecimals: 5,
        opposite: false,
        showRects: true,
        offset: 140,
        title: {
            text: 'Scale 3'
        }
    }],
    xAxis: {
        type: 'datetime'
    },
    tooltip: {
                    xDateFormat: '%A, %b %e, %H:%M:%S', // Shows only [Day, Mon dd, hh:mi:ss]
                    shared: true,
                    pointFormat: ' <span style="color:{series.color}">{series.name}</span>: <b>{point.y:.5f}</b>'+tooltipSuffix+' <br/>',
//                    valueDecimals: 5,
//                    crosshairs: true
     } ,
    series: example_data
});

<div id="chart"></div>

此致阿米特

Answer 1

您可以为xAxis设置最大值，并在添加新点时将其增加（通过Axis.update()）。

示例：http://jsfiddle.net/6u8q9kgp/5/

其他选项是添加隐藏空值点的新系列（x等于未来日期），这只会增加xAxis的可见范围。

示例：http://jsfiddle.net/6u8q9kgp/4/

HighChart在X轴上显示实时图表的未来时间

1 个答案: