amcharts 不能以正确的格式表示数据答案

【问题标题】：amcharts doesn't represent data in right formatamcharts 不能以正确的格式表示数据
【发布时间】：2019-12-21 17:19:04
【问题描述】：

我正在从数据库中检索值并将其推送到 amchart (XYChart) x Axes 的值无法正常工作。

这是图表代码

var chart5;
  function generateChart5(json) {
    chart5 = am4core.create("chart5-data", am4charts.XYChart);
    chart5.data = json;
    var dateAxis = chart5.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.minGridDistance = 50;
    function createAxisAndSeries(field, name, opposite, bullet) {
      var valueAxis = chart5.yAxes.push(new am4charts.ValueAxis());
      var series = chart5.series.push(new am4charts.LineSeries());
      series.dataFields.valueY = field;
      series.dataFields.dateX = "time";
      series.strokeWidth = 2;
      series.yAxis = valueAxis;
      series.name = name;
      series.tooltipText = "{name}: [bold]{valueY}[/]";
      series.tensionX = 0.8;
      var interfaceColors = new am4core.InterfaceColorSet();
      valueAxis.renderer.line.strokeOpacity = 1;
      valueAxis.renderer.line.strokeWidth = 2;
      valueAxis.renderer.line.stroke = series.stroke;
      valueAxis.renderer.labels.template.fill = series.stroke;
      valueAxis.renderer.opposite = opposite;
      valueAxis.renderer.grid.template.disabled = true;
      valueAxis.renderer.labels.template.disabled = true; //disables labels
    }

    createAxisAndSeries("angry", "Angry", true, "circle");
    createAxisAndSeries("disgust", "Disgust", true, "triangle");
    createAxisAndSeries("happy", "Happy", true, "rectangle");
    createAxisAndSeries("neutral", "Neutral", true, "circle");
    createAxisAndSeries("sad", "Sad", true, "triangle");
    createAxisAndSeries("surprise", "Surprise", true, "rectangle");
    createAxisAndSeries("fear", "Fear", true, "rectangle");

    chart5.legend = new am4charts.Legend();

    chart5.cursor = new am4charts.XYCursor();
  };

这就是json文件的样子

[{
  "time": 1,
  "angry": 141,
  "disgust": 118,
  "happy": 106,
  "neutral": 117,
  "sad": 138,
  "surprise": 132,
  "fear": 135
},
.
.
.
.]

这就是图表的样子

amcharts

【问题讨论】：

时间应该是日期吗？按照你的 json，它肯定看起来不像约会。您是否尝试过使用 CategoryAxis 或 ValueAxis 代替您的 X 轴？
好吧，我没看到，谢谢老兄它成功了

标签： javascript html json charts amcharts

【解决方案1】：

好吧，我不知道 amcharts 有不同类型的 Axes。事实证明，这两行是问题所在。

var dateAxis = chart5.xAxes.push(new am4charts.DateAxis());
      series.dataFields.dateX = "time";

我把它们改成了这样：

var dateAxis = chart5.xAxes.push(new am4charts.valueAxis());
      series.dataFields.valueX = "time";

非常感谢xorspark

【讨论】：