Question

我正在尝试查看如何使用与此

完全相同的可滚动AMCharts线图

这是我所谈论的JSFiddle。 https://jsfiddle.net/6nchebyu/1/

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>                           


var chartData = generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "autoMarginOffset": 20,
    "marginTop": 7,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.2,
        "dashLength": 1,
        "position": "left"
    }],
    "mouseWheelZoomEnabled": true,
    "graphs": [{
        "id": "g1",
        "balloonText": "[[value]]",
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletColor": "#FFFFFF",
        "hideBulletsCount": 50,
        "title": "red line",
        "valueField": "visits",
        "useLineColorForBulletBorder": true,
        "balloon":{
            "drop":true
        }
    }],
    "chartScrollbar": {
        "autoGridCount": true,
        "graph": "g1",
        "scrollbarHeight": 40
    },
    "chartCursor": {
       "limitToGraph":"g1"
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "axisColor": "#DADADA",
        "dashLength": 1,
        "minorGridEnabled": true
    },
    "export": {
        "enabled": true
    }
});

chart.addListener("rendered", zoomChart);
zoomChart();

// this method is called when chart is first inited as we listen for "rendered" event
function zoomChart() {
    // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
    chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
}


// generate some random data, quite different range
function generateChartData() {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 5);

    for (var i = 0; i < 1000; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var visits = Math.round(Math.random() * (40 + i / 5)) + 20 + i;

        chartData.push({
            date: newDate,
            visits: visits
        });
    }
    return chartData;
}

但是我想让它每分钟都更新而不是＆＃34;重置＆＃34;如果您正在查看旧数据（放大或缩小），请使用视口。也许有一个按钮将它重置回前面，然后继续显示当前数据进来？这有可能拥有所有这些吗？

Answer 1

我在创建这个主题后想出了一点。

chart.zoomOutOnDataUpdate = false;
    var j = 101;
    setInterval(function () {
        var x = j++,
            y = (Math.random() * 50) + 50;

        chart.dataProvider.shift();
        chart.

    dataProvider.push({
        date: x,
        visits: y
    });

    // chart.dataChanged();
    chart.validateData();
}, 1000);

chart.zoomOutOnDataUpdate = false;使它不会继续放大。

chart.dataProvider.shift（）将第一个数据点推离屏幕。此时我只需要添加一个自定义按钮来设置zoomOutOnDataUpdate = true，当我点击它时。当缩小或放大时，也可能将其更改为false。

AMCharts可滚动和更新每分钟UI

1 个答案: