如何在 CanvasJS 中从 4 个数组加载数据点以创建图表

const ColorBac = ["rgba(255, 0, 50, 0.2)", "rgba(27, 68, 128, 0.2)", "rgba(246, 162, 30, 0.2)", "rgba(23, 135, 95, 0.2)"];
const Colorborder = ["rgba(255, 0, 50, 0.6)", "rgba(27, 68, 128, 0.6)", "rgba(246, 162, 30, 0.6)", "rgba(23, 135, 95, 0.6)"];

Api = api('Chart');
console.log("load Api Array");
console.log(Api.ExData);

function setColor(chart) {
  for (var i = 0; i < chart.options.data.length; i++) {
    dataSeries = chart.options.data[i];

    for (var j = 0; j < dataSeries.dataPoints.length; j++) {
      if (dataSeries.dataPoints[j].y <= 0)
        dataSeries.dataPoints[j].color = ColorBac[j];
    }
  }
}

function ShowChart() {
  var dataPoints = [];
  //GetData();
  $.each(Api.ExData, function(index, Info) {
    dataPoints.push({
      x: parseInt(Info.fldHesabID),
      y: parseInt(Info.fldMojoodi),
      label: Info.fldDate,
      mouseover: onMouseover,
    });
  });
  console.log('load dataPoints');
  console.log(dataPoints);
  ///////
  var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2", // "light1", "light2", "dark1", "dark2"

    axisY: {
      //title: "Reserves(MMbbl)"
      //labelAngle: 30
    },
    axisX: {
      interval: 1,
      //minimum: 0,
      //  maximum: 20,
      labelAngle: 30
    },
    data: [{
      type: "line",
      toolTipContent: "{label}: {y} ",
      dataPoints: dataPoints,
    }]
  });

  console.log('load Chart');
  setColor(chart);
  chart.render();

  function onMouseover(e) {  
    createGauge(e.dataPoint.progressVal);
  }
}
ShowChart();
console.log('end Chart');

<div id="chartContainer" style="height: 370px; width: 100%;border: 1px solid green;"></div>
<br>

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>