Amcharts - 折线图未正确显示

时间:2014-03-19 18:24:13

标签: javascript amcharts

自从我尝试这段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;
    }

我看到我传递的值为整数类型,日期时间为date数据类型。但我不确定我哪里出错了。你可以帮我解决这个问题吗?如果我遗失了什么,请告诉我。

This是jsFiddle链接。

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

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