Question

我在这里准备了线性图和一些数据：

https://codepen.io/cherioss/pen/xpNgrJ?editors=0010

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

下一个问题是下面的矩形，它应该显示样本的日期，而不是显示日，月和一些数字。我要求日期格式如下： YYYY / MM / DD - mm：ss 。

感谢您的帮助。

codepen中的图表代码：

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设置为所需的格式。在这种情况下，"YYYY/MM/DD - NN:SS"就是您想要的。如果您需要使用不同的格式，请参阅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>

线性amcharts图不能核心显示数据

1 个答案: