javascript - ApexCharts 数据未正确呈现

Question

据我所知，我已经反映了 ApexCharts 示例中所示的系列格式，但图表看起来真的错了。

我用我的测试数据和图表渲染笨拙地做了一个代码笔。我已经尝试过使用不同的日期格式，但它们都呈现相同的。

https://codepen.io/yaehjs/pen/wvBdMWB

series: [
{
  name: "Damage",
  data: [
    [1572912000000, 1],
    [1573516800000, 2],
    [1574640000000, 3],
    [1575331200000, 4],
    [1575417600000, 5],
    [1575763200000, 6],
    [1576540800000, 7],
    [1576627200000, 8],
    [1576713600000, 14],
    [1576800000000, 15]
  ]
},
{
  name: "Injury",
  data: [[1576627200000, 1], [1576713600000, 4]]
},
{
  name: "Slip/Fall",
  data: [
    [1572739200000, 1],
    [1576022400000, 2],
    [1576108800000, 3],
    [1576540800000, 5]
  ]
},
{
  name: "Spill",
  data: [[1576627200000, 1], [1576713600000, 7], [1576800000000, 8]]
},
{
  name: "Personnel",
  data: [
    [1572912000000, 1],
    [1573516800000, 2],
    [1574640000000, 3],
    [1575331200000, 4],
    [1575417600000, 5],
    [1575763200000, 6],
    [1576540800000, 7],
    [1576627200000, 9],
    [1576713600000, 12]
  ]
},
{
  name: "Equipment",
  data: []
}

],

谁能看到我的数据哪里出错了？

标签： javascriptapexcharts

Answer 1

对于任何在未来看到这个的人来说，怪异源于一个核心问题。对于时间线图表，所有系列都需要具有相同的日期数据点，否则图表将无法正确呈现。

以下是正确数据的示例：

[{
    "totalCount": 15,
    "name": "Damage",
    "data": [
        [ "2019-11-03", 0],
        [ "2019-11-05", 1],
        [ "2019-11-12", 2],
        [ "2019-11-25", 3],
        [ "2019-12-01", 3],
        [ "2019-12-03", 4],
        [ "2019-12-04", 5],
        [ "2019-12-08", 6],
        [ "2019-12-11", 6],
        [ "2019-12-12", 6],
        [ "2019-12-17", 7],
        [ "2019-12-18", 8],
        [ "2019-12-19", 14],
        [ "2019-12-20", 15],
        [ "2019-12-21", 15]
    ]
},
{
    "totalCount": 4,
    "name": "Injury",
    "data": [
        [ "2019-11-03", 0],
        [ "2019-11-05", 0],
        [ "2019-11-12", 0],
        [ "2019-11-25", 0],
        [ "2019-12-01", 0],
        [ "2019-12-03", 0],
        [ "2019-12-04", 0],
        [ "2019-12-08", 0],
        [ "2019-12-11", 0],
        [ "2019-12-12", 0],
        [ "2019-12-17", 0],
        [ "2019-12-18", 1],
        [ "2019-12-19", 4],
        [ "2019-12-20", 4],
        [ "2019-12-21", 4]
    ]
}
//...,
]

代码笔：https ://codepen.io/yaehjs/pen/wvBdMWB

var options = {
  chart: {
    height: 350,
    type: "area",
    stacked: true,
    events: {
      selection: function(chart, e) {
        console.log(new Date(e.xaxis.min));
      }
    }
  },
  colors: ["#008FFB", "#00E396", "#CED4DC"],
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: "smooth"
  },

  series: [
    {
      name: "Damage",
      data: [
        [1572912000000, 1],
        [1573516800000, 2],
        [1574640000000, 3],
        [1575331200000, 4],
        [1575417600000, 5],
        [1575763200000, 6],
        [1576540800000, 7],
        [1576627200000, 8],
        [1576713600000, 14],
        [1576800000000, 15]
      ]
    },
    {
      name: "Injury",
      data: [[1576627200000, 1], [1576713600000, 4]]
    },
    {
      name: "Slip/Fall",
      data: [
        [1572739200000, 1],
        [1576022400000, 2],
        [1576108800000, 3],
        [1576540800000, 5]
      ]
    },
    {
      name: "Spill",
      data: [[1576627200000, 1], [1576713600000, 7], [1576800000000, 8]]
    },
    {
      name: "Personnel",
      data: [
        [1572912000000, 1],
        [1573516800000, 2],
        [1574640000000, 3],
        [1575331200000, 4],
        [1575417600000, 5],
        [1575763200000, 6],
        [1576540800000, 7],
        [1576627200000, 9],
        [1576713600000, 12]
      ]
    },
    {
      name: "Equipment",
      data: []
    }
  ],
  fill: {
    type: "gradient",
    gradient: {
      opacityFrom: 0.6,
      opacityTo: 0.8
    }
  },
  legend: {
    position: "top",
    horizontalAlign: "left"
  },
  xaxis: {
    type: "datetime"
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

/*
      // this function will generate output in this format
      // data = [
          [timestamp, 23],
          [timestamp, 33],
          [timestamp, 12]
          ...
      ]
      */
function generateDayWiseTimeSeries(baseval, count, yrange) {
  var i = 0;
  var series = [];
  while (i < count) {
    var x = baseval;
    var y =
      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    series.push([x, y]);
    baseval += 86400000;
    i++;
  }
  return series;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.8.6/apexcharts.min.js"></script>
<div id="chart"></div>