Question

我正在使用amcharts作为个人用途的小应用程序。我得到了一个静态的本地副本按照我想要的方式工作，但是当我做了一些改动以使它变得动态我没有得到

SCRIPT5007: Unable to get property 'time' of undefined or null reference

在serial.js第46行，第364位。

代码：

  // SERIAL CHART
  chart = new AmCharts.AmSerialChart();

  chart.dataProvider = chartData;
  chart.categoryField = "date";
  chart.balloon.bulletSize = 5;

  // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
  chart.addListener("dataUpdated", zoomChart);

  // AXES
  // category
  var categoryAxis = chart.categoryAxis;
  categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
  categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
  categoryAxis.minorGridEnabled = true;
  categoryAxis.axisColor = "#DADADA";
  categoryAxis.twoLineMode = true;
  categoryAxis.dateFormats = [{
                    period: 'fff',
                    format: 'JJ:NN:SS'
                }, {
                    period: 'ss',
                    format: 'JJ:NN:SS'
                }, {
                    period: 'mm',
                    format: 'JJ:NN'
                }, {
                    period: 'hh',
                    format: 'JJ:NN'
                }, {
                    period: 'DD',
                    format: 'DD'
                }, {
                    period: 'WW',
                    format: 'DD'
                }, {
                    period: 'MM',
                    format: 'MMM'
                }, {
                    period: 'YYYY',
                    format: 'YYYY'
  }];

  // first value axis (on the left)
  var valueAxis = new AmCharts.ValueAxis();
  valueAxis.axisColor = "#FF6600";
  valueAxis.axisThickness = 2;
  chart.addValueAxis(valueAxis);

  // GRAPHS (one per line you want to make which for us is one line per user
  var users = listUsers();
  var bulletList=["round", "square", "triangleUp", "triangleDown", "triangleLeft", "triangleRight", "bubble", "diamond"];
  var colorList=["#00FF00", "#FF0000", "#0000FF", "#FF00FF", "#FFFF00", "#00FFFF", "#000000"];
  var bulletIndex = 0;
  var colorIndex = 0;
  for(var user in users) {
    var graph = new AmCharts.AmGraph();
    graph.valueAxis = valueAxis; // we have to indicate which value axis should be used
    graph.title = users[user];
    graph.valueField = users[user];
    graph.bullet = bulletList[bulletIndex++];
    graph.hideBulletsCount = 30;
    graph.bulletBorderThickness = 1;
    graph.lineColor = colorList[colorIndex++];
    chart.addGraph(graph);

    if(bulletIndex >= bulletList.length) {
      bulletIndex = 0;
    }
    if(colorIndex >= colorList.length) {
      colorIndex = 0;
    }
  }

  // CURSOR
  var chartCursor = new AmCharts.ChartCursor();
  chartCursor.cursorAlpha = 0.1;
  chartCursor.fullWidth = true;
  chartCursor.valueLineBalloonEnabled = true;
  chart.addChartCursor(chartCursor);

  // SCROLLBAR
  var chartScrollbar = new AmCharts.ChartScrollbar();
  chart.addChartScrollbar(chartScrollbar);

  // LEGEND
  var legend = new AmCharts.AmLegend();
  legend.marginLeft = 110;
  legend.useGraphSettings = true;
  chart.addLegend(legend);

  // WRITE
  chart.write("chartdiv");

样本数据：

var allData = {
  "series1" : [ {
    "date" : new Date("01/05/2017"),
    "Brian" : 290,
    "Lisa" : 188
  }, {
    "date" : new Date("01/06/2017"),
    "Brian" : 289,
    "Lisa" : 188
  }, {
    "date" : new Date("01/07/2017"),
    "Brian" : 288,
    "Lisa" : 187
  } ],
  "series2" : [ {
    "date" : new Date("01/05/2017"),
    "Brian" : 28.9,
    "Lisa" : 18.8
  }, {
    "date" : new Date("01/06/2017"),
    "Brian" : 28.9,
    "Lisa" : 18.8
  }, {
    "date" : new Date("01/07/2017"),
    "Brian" : 28.8,
    "Lisa" : 18.7
  } ]
}

Answer 1

查看您的数据格式，它不是dataProvider的预期格式。 dataProvider是一个对象数组，您可以从the demos on AmCharts' site看到。你有一个对象包含在series1和series2中的两个对象数组，这些对象将无法工作。这就是数据的外观：

[{
  "date": <your string date, millisecond timestamp, or date object>,
  "Brian": <value>,
  "Lisa": <value>
}, 
// ... etc
]

Fiddle

如果要在同一个图表中比较多个系列，那么您应该查看how to create a stock chart，这似乎更符合您的尝试。 “series1”和“series2”数组可以表示为DataSet个对象。

这是一个quick and dirty fiddle，可以将您的数据实施到股票图表中，利用您的大部分代码来帮助您入门。

使用amcharts并获取javascript错误

1 个答案: