Apexcharts 更新 2 条折线图数据 JSON API 和 AJAX

Question

在我的 Apexchart 中用 2 行 渲染 JSON 中的一些数据时遇到一些问题，这是我的代码的一部分。

我的数据： {"data2":[{"Hour":"07:00-08:00","Produced":80, "Target":120},{"Hour":"08:00-09:00","生产”：90，“目标”：120}，{“小时”：“09:00:10:00”，“生产”：85，“目标”：90}，{“小时”：“10:00- 11:00","Produced":22, "Target": 120},{"Hour":"11:00:12:00","Produced":80, "Target": 70},{"Hour" :"12:00:13:00","Produced":65, "Target":50},{"Hour":"13:00:14:00","Produced":80,"Target":120 },"Hour":"14:00:15:00","Produced":130,"Target":100},"Hour":"15:00:16:00","Produced":80, "目标”：120}，{“小时”：“16:00:16:30”，“生产”：80，“目标”：40} ] }

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.26.3/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


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

<script>
    var options = {
                    series: [

                            ],
                    chart: {
                        height: 350,
                        type: 'line',
                    },
                    dataLabels: {
                        enabled: true
                    },
                    title: {
                        text: 'Production Line',
                    },
                    noData: {
                        text: 'Loading...'
                    },
                    xaxis: {
                        type: 'category',
                        tickPlacement: 'on',
                        labels: {
                            rotate: -45,
                            rotateAlways: true
                        }
                    }
    };
    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
   var controllerUrl = "@this.Url.Action(actionName: "LineChartProductionHour", controllerName: "LineChart")";
   $.getJSON({ url: controllerUrl }, function (data2) {

        a_data = data2;

        chart.updateSeries(
            [{
                name: 'Produced',
                data: {a_data.Hour, a_data.Produced}
            }, {
                name: 'Target',
                data: {data2.Hour, data2.Target}
            }]
        )
    });

</script>

Answer 1

您可以将 produce 和 target 的数据分隔在从 ajax 调用返回的不同 JSON Array 中，然后将它们传递到您的图表系列中。

演示代码：

var options = {
  series: [],
  chart: {
    height: 350,
    type: 'line',
  },
  dataLabels: {
    enabled: true
  },
  title: {
    text: 'Production Line',
  },
  noData: {
    text: 'Loading...'
  },
  xaxis: {
    type: 'category',
    tickPlacement: 'on',
    labels: {
      rotate: -45,
      rotateAlways: true
    }
  }
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
/*var controllerUrl = "@this.Url.Action(actionName: "LineChartProductionHour", controllerName: "LineChart")";
  $.getJSON({ url: controllerUrl }, function (data2) {*/
//suppose this is return..from ajax
var data2 = {
  "data2": [{
    "Hour": "07:00-08:00",
    "Produced": 80,
    "Target": 120
  }, {
    "Hour": "08:00-09:00",
    "Produced": 90,
    "Target": 120
  }, {
    "Hour": "09:00:10:00",
    "Produced": 85,
    "Target": 90
  }, {
    "Hour": "10:00-11:00",
    "Produced": 22,
    "Target": 120
  }, {
    "Hour": "11:00:12:00",
    "Produced": 80,
    "Target": 70
  }, {
    "Hour": "12:00:13:00",
    "Produced": 65,
    "Target": 50
  }, {
    "Hour": "13:00:14:00",
    "Produced": 80,
    "Target": 120
  }, {
    "Hour": "14:00:15:00",
    "Produced": 130,
    "Target": 100
  }]
}
a_data = data2;
var produce = []
var target = []
//loop through return data 
$(a_data.data2).each(function(i, v) {
  //push values as x & y
  produce.push({
    "x": v.Hour,
    "y": v.Produced
  })
  target.push({
    "x": v.Hour,
    "y": v.Target
  })
})
chart.updateSeries([{
  name: 'Produced',
  data: produce //pass them here 
}, {
  name: 'Target',
  data: target //pass them here
}])

/*})*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.26.3/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


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