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: []
}

],

誰能看到我的數據哪里出了問題？

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>