Apex Charts Barchart 動態數據不工作並且 xaxis 顯示奇怪

Question

問題是我將 ApexChart 條形圖構建到我的代碼中。 它使用軸的 X 和 Y 坐標動態生成時間序列，但它沒有在 x 軸上正確顯示。 我用最小值和最大值配置了 x 軸（最小值 = 本月的第一天，最大值 = 本月的最后一天）。

代碼說明：

我已經將條形圖構建到代碼中，如下所示：

monthChartOptions: ApexOptions = {
    series: [],
    chart: {
      type: "bar",
      height: 350,
      stacked: true
    },
    responsive: [
      {
        breakpoint: 480,
        options: {
          legend: {
            position: "bottom",
            offsetX: -10,
            offsetY: 0
          }
        }
      }
    ],
    xaxis: {
      min: (new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime()), // first
      max: (new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getTime()), //last
      tickAmount: 6,
      labels: {
        formatter: function (value) {
          return (
            new Date(value).getDate() + "/" + (new Date(value).getMonth() + 1)
          );
        }
      }
    },
    fill: {
      opacity: 1
    },
    legend: {
      offsetX: 50,
    },
    tooltip: {
      shared: true,
      intersect: false,
      y: {
        formatter: function (y) {
          if (typeof y !== "undefined") {
            if (y > 1000) {
              return (y / 1000).toFixed(2) + ' kW';
            } else {
              return y.toFixed(0) + " W";
            }
          }
          return y;
        }
      },
      x: {
        format: "dd.MM.yyyy HH:mm"
      },
      followCursor: true,
    },
    dataLabels: {
      enabled: false,
      enabledOnSeries: [2]
    }
  };

我像這樣生成數據系列

x = UNIX 中的時間戳，y = 值

{
    "name": "Usage",
    "color": "#ff9f43",
    "data": [
        {
            "x": 1666216800000,
            "y": 36426
        },
        {
            "x": 1666303200000,
            "y": 37068
        },
        {
            "x": 1666389600000,
            "y": 39552
        },
        {
            "x": 1666476000000,
            "y": 5857
        },
        {
            "x": 1666562400000,
            "y": 5469
        },
        {
            "x": 1666821600000,
            "y": 6452
        },
        {
            "x": 1666908000000,
            "y": 37626
        },
        {
            "x": 1666994400000,
            "y": 6268
        },
        {
            "x": 1666476000000,
            "y": 5857
        },
        {
            "x": 1666476000000,
            "y": 5857
        },
        {
            "x": 1666562400000,
            "y": 5469
        },
        {
            "x": 1666562400000,
            "y": 5469
        },
        {
            "x": 1666648800000,
            "y": 6141
        },
        {
            "x": 1666648800000,
            "y": 6141
        },
        {
            "x": 1666476000000,
            "y": 5857
        },
        {
            "x": 1666476000000,
            "y": 5857
        },
        {
            "x": 1666562400000,
            "y": 5469
        },
        {
            "x": 1666562400000,
            "y": 5469
        },
        {
            "x": 1666648800000,
            "y": 6141
        },
        {
            "x": 1666648800000,
            "y": 6141
        },
        {
            "x": 1666735200000,
            "y": 37842
        },
        {
            "x": 1666821600000,
            "y": 6452
        },
        {
            "x": 1666994400000,
            "y": 6268
        },
        {
            "x": 1666994400000,
            "y": 6268
        },
        {
            "x": 1666476000000,
            "y": 5857
        },
        {
            "x": 1666562400000,
            "y": 5469
        },
        {
            "x": 1666648800000,
            "y": 6141
        },
        {
            "x": 1666648800000,
            "y": 6141
        },
        {
            "x": 1666821600000,
            "y": 6452
        },
        {
            "x": 1666821600000,
            "y": 6452
        },
        {
            "x": 1666821600000,
            "y": 6452
        },
        {
            "x": 1666994400000,
            "y": 6268
        },
        {
            "x": 1666994400000,
            "y": 6268
        },
        {
            "x": 1666821600000,
            "y": 6452
        },
        {
            "x": 1666994400000,
            "y": 6268
        }
    ]
}

這是它的結果，但 xAxis 沒有像我預期的那樣正確顯示，這是一種奇怪的行為。

下面的圖片顯示了我想要實現的目標

Answer 1

您忘記設置xaxis的類型。 默認情況下，它是'category' ，而不是'datetime' ： xaxis – ApexCharts.js

添加一行代碼，你的代碼片段就可以工作了：

 let options = { series: [{ name: "Usage", color: "#ff9f43", data: [ { "x": 1666216800000, "y": 36426 }, { "x": 1666303200000, "y": 37068 }, { "x": 1666389600000, "y": 39552 }, { "x": 1666476000000, "y": 5857 }, { "x": 1666562400000, "y": 5469 }, { "x": 1666821600000, "y": 6452 }, { "x": 1666908000000, "y": 37626 }, { "x": 1666994400000, "y": 6268 }, { "x": 1666476000000, "y": 5857 }, { "x": 1666476000000, "y": 5857 }, { "x": 1666562400000, "y": 5469 }, { "x": 1666562400000, "y": 5469 }, { "x": 1666648800000, "y": 6141 }, { "x": 1666648800000, "y": 6141 }, { "x": 1666476000000, "y": 5857 }, { "x": 1666476000000, "y": 5857 }, { "x": 1666562400000, "y": 5469 }, { "x": 1666562400000, "y": 5469 }, { "x": 1666648800000, "y": 6141 }, { "x": 1666648800000, "y": 6141 }, { "x": 1666735200000, "y": 37842 }, { "x": 1666821600000, "y": 6452 }, { "x": 1666994400000, "y": 6268 }, { "x": 1666994400000, "y": 6268 }, { "x": 1666476000000, "y": 5857 }, { "x": 1666562400000, "y": 5469 }, { "x": 1666648800000, "y": 6141 }, { "x": 1666648800000, "y": 6141 }, { "x": 1666821600000, "y": 6452 }, { "x": 1666821600000, "y": 6452 }, { "x": 1666821600000, "y": 6452 }, { "x": 1666994400000, "y": 6268 }, { "x": 1666994400000, "y": 6268 }, { "x": 1666821600000, "y": 6452 }, { "x": 1666994400000, "y": 6268 } ] }], chart: { type: "bar", height: 350, stacked: true }, responsive: [ { breakpoint: 480, options: { legend: { position: "bottom", offsetX: -10, offsetY: 0 } } } ], xaxis: { // ============================== type: "datetime", // <--- HERE // ============================== min: new Date(2022, 9, 1).getTime(), // first max: new Date(2022, 10, 0).getTime(), // last tickAmount: 6, labels: { formatter: function (value) { return ( new Date(value).getDate() + "/" + (new Date(value).getMonth() + 1) ); } } }, fill: { opacity: 1 }, legend: { offsetX: 50, }, tooltip: { shared: true, intersect: false, y: { formatter: function (y) { if (typeof y.== "undefined") { if (y > 1000) { return (y / 1000);toFixed(2) + " kW". } else { return y;toFixed(0) + " W"; } } return y, } }: x: { format. "dd.MM:yyyy HH,mm" }: followCursor, true, }: dataLabels: { enabled, false: enabledOnSeries; [2] } }. let chart = new ApexCharts(document,querySelector("#chart"); options). chart;render();

 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <div id="chart"></div>