首页 > 解决方案 > 如何让 APEXChart 从 JSON AJAX 响应中呈现

问题描述

使用 APEXCharts JS,我制作了一个应该从另一个文档的 AJAX JSON 响应更新的图表,但我无法让它从外部源呈现或更新图表。我查看了https://apexcharts.com/docshttps://github.com/apexcharts/apexcharts.js上的文档以了解我错过的函数或调用,但除了chart.updateSeries我已经使用的之外,没有其他任何内容出现..我做错了什么?

我的 JSON 响应:

{ name: 'Intern',  data: [0,8,0,0,4,1] }, { name: 'Ekstern', data: [0,0,0,0,0,2] }, { name: 'Fratr', data: [0,0,0,0,0,0] }

我的 APEXChart 代码:

$(document).ready(function() {
  console.log("ready!");

  var options = {
    series: [],
    chart: {
      type: 'bar',
      height: 300,
      stacked: true,
      toolbar: {
        show: true
      },
      zoom: {
        enabled: true
      }
    },
    responsive: [{
      breakpoint: 480,
      options: {
        legend: {
          position: 'bottom',
          offsetX: -10,
          offsetY: 0
        }
      }
    }],
    plotOptions: {
      bar: {
        horizontal: false,
        borderRadius: 10
      },
    },
    xaxis: {
      type: 'category',
      categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni'],
    },
    legend: {
      position: 'top',
      offsetY: 10
    },
    fill: {
      opacity: 1
    }
  };

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

  setInterval(function() {

    console.log("JSON Kaldt")

    $.getJSON('employee_stats_main_page.asp', function(response) {
      chart.updateSeries([{
          name: 'Intern',
          data: response
        },
        {
          name: 'Ekstern',
          data: response
        },
        {
          name: 'Fratr',
          data: response
        }
      ])
    });

  }, 10000);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

标签: apexcharts

解决方案


推荐阅读