Amcharts -折线图不能正确显示

Amcharts - Line Chart not getting displayed properly

本文关键字:显示 不能 折线图 Amcharts      更新时间:2023-09-26

我已经有一段时间没有尝试这段amcharts代码了。它工作得很好,直到一个星期前,但我对我的旧代码做了一些改变,事情并没有像预期的那样工作。这是我正在尝试的密码。从这段代码生成的图表搞砸了。

    var chartData1 = generateChartData();
    for ( var i = 0; i < chartData1.length; i++) {
      alert(chartData1[i].visits + " --- " + chartData1[i].date);
    }
    var chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "none",
        "pathToImages": "http://www.amcharts.com/lib/3/images/",
        "dataProvider": chartData1,
        "valueAxes": [{
            "axisAlpha": 0.2,
            "dashLength": 1,
            "position": "left"
        }],
        "graphs": [{
            "id":"g1",
            "balloonText": "[[category]]<br /><b><span style='font-size:14px;'>value: [[value]]</span></b>",
            "bullet": "round",
            "bulletBorderAlpha": 1,
                    "bulletColor":"#FFFFFF",
            "hideBulletsCount": 50,
            "title": "red line",
            "valueField": "visits",
                    "useLineColorForBulletBorder":true
        }],
        "chartScrollbar": {
            "autoGridCount": true,
            "graph": "g1",
            "scrollbarHeight": 40
        },
        "chartCursor": {
            "cursorPosition": "mouse"
        },
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "axisColor": "#DADADA",
            "dashLength": 1,
            "minorGridEnabled": true,
             "minPeriod": "ss"
        },
            "exportConfig":{
              menuRight: '20px',
          menuBottom: '30px',
          menuItems: [{
          icon: 'http://www.amcharts.com/lib/3/images/export.png',
          format: 'png'
          }]
            }
    });
    chart.addListener("rendered", zoomChart);
    zoomChart();
    // this method is called when chart is first inited as we listen for "dataUpdated" 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 chartData1 = [];
      var chartData =
                         [{"visits":"145","date":"1394139116"},{"visits":"195","date":"1394138636"},{"visits":"103","date":"1394137411"},{"visits":"147","date":"1394138156"},{"visits":"146","date":"1394139113"}];
      for ( var i = 0; i < chartData.length; i++) {
                    var utcSeconds = chartData[i].date;
                    var d = new Date(0); // The 0 there is the key, which sets the date to the epoch
                    d.setUTCSeconds(utcSeconds);
                            var login = parseInt(chartData[i].visits);
                     chartData1.push({
                            date : d,
                            visits : login
                        });
      }
        return chartData1;
    }

我看到我正在传递一个值作为整数类型和日期时间在日期数据类型。但我不确定我哪里错了。你能帮我解决这个问题吗?如果我遗漏了什么,请告诉我。

这是jsFiddle链接。

事先非常感谢您的帮助

我的时间不是按升序排序的,而是随机的时间顺序,这就是我的问题的原因。现在我的问题解决了。