没有正确显示数据

Question

我准备了线性图和一些数据here。

如您所见，当您尝试在中间显示样本的详细信息时，图表显示另一个样本的详细信息。作为日期格式，我使用的是 Unix 时间戳。

下一个问题是下面的矩形应该显示样本的日期，而不是显示日、月和一些数字。我需要像 YYYY/MM/DD - mm:ss.

这样的日期格式

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

Answer 1

有几个问题。

1) 根据 parseDates documentation 文档，您的基于日期的数据必须按升序排序。您的日期乱序，这将导致图表行为问题，如您所看到的那样。

2) 您必须设置类别轴 minPeriod 以匹配数据中每个日期之间的最小周期。看起来秒 ("ss") 是合适的。

关于图表光标的格式化，如果需要使用不同的格式，可以设置categoryBalloonDateFormat to the desired format. In this case "YYYY/MM/DD - NN:SS" is what you want. Refer to the formatting dates documentation。

另请注意，如果您使用的是毫秒时间戳，则不需要 dataDateFormat。 dataDateFormat 仅用于解析字符串形式的日期数据。

更新了以下代码：

var chartData = [
  {
    xCoordinate: 1511509736056,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511509955035,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511510013033,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511510152052,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511510436036,
    yCoordinate: 1
  },
  {
    xCoordinate: 1511510664024,
    yCoordinate: 1
  }
];

//sort dates into ascending order
chartData.sort(function(lhs, rhs) {
  return lhs.xCoordinate - rhs.xCoordinate;
});

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: "BallonText",
      bullet: "round",
      bulletBorderAlpha: 1,
      bulletColor: "#FFFFFF",
      hideBulletsCount: 50,
      title: "red line",
      valueField: "yCoordinate",
      useLineColorForBulletBorder: true,
      balloon: {
        drop: true
      }
    }
  ],
  chartScrollbar: {
    autoGridCount: true,
    graph: "g1",
    scrollbarHeight: 40
  },
  chartCursor: {
    limitToGraph: "g1",
    categoryBalloonDateFormat: "YYYY/MM/DD - NN:SS" //change date format in cursor
  },
  categoryField: "xCoordinate",
  categoryAxis: {
    parseDates: true,
    axisColor: "#DADADA",
    dashLength: 1,
    minPeriod: "ss", //update min period to match the smallest intervals in your data.
    minorGridEnabled: true
  },
  export: {
    enabled: true
  }
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
 width: 100%;
 height: 100%;
}

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

没有正确显示数据

Doesn't show data correctly

graph

amcharts