在条形图中使用json url数据

Question

这是存储在URL中的json数据(示例：http://localhost/icx/test/link.html)。这些数据是实时的，并且随着时间的推移而变化

    [{
        "call_time": "0",
        "total_inc_traffic": "1363.10",
        "total_out_traffic": "88.70"
    }, {
        "call_time": "1",
        "total_inc_traffic": "479.57",
        "total_out_traffic": "36.98"
    }, {
        "call_time": "2",
        "total_inc_traffic": "239.57",
        "total_out_traffic": "13.43"
    }, {
        "call_time": "3",
        "total_inc_traffic": "190.28",
        "total_out_traffic": "8.20"
    }, {
        "call_time": "4",
        "total_inc_traffic": "223.80",
        "total_out_traffic": "0.00"
    }, {
        "call_time": "5",
        "total_inc_traffic": "158.87",
        "total_out_traffic": "19.58"
    }, {
        "call_time": "6",
        "total_inc_traffic": "27.52",
        "total_out_traffic": "36.18"
    }, {
        "call_time": "7",
        "total_inc_traffic": "47.70",
        "total_out_traffic": "69.57"
    }, {
        "call_time": "8",
        "total_inc_traffic": "2234.35",
        "total_out_traffic": "137.60"
    }, {
        "call_time": "9",
        "total_inc_traffic": "150.67",
        "total_out_traffic": "162.07"
    }, {
        "call_time": "10",
        "total_inc_traffic": "4497.05",
        "total_out_traffic": "267.32"
    }, {
        "call_time": "11",
        "total_inc_traffic": "5049.87",
        "total_out_traffic": "242.42"
    }, {
        "call_time": "12",
        "total_inc_traffic": "5227.67",
        "total_out_traffic": "286.88"
    }, {
        "call_time": "13",
        "total_inc_traffic": "3384.30",
        "total_out_traffic": "360.88"
    }, {
        "call_time": "14",
        "total_inc_traffic": "3650.73",
        "total_out_traffic": "328.28"
    }]

条形图javascript代码如下所示。上面的url数据需要在这个图中使用。

    <script>
    var options = {
      chart: {
        height: 255,
        type: "bar"
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: "55%",
          endingShape: "rounded"
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 0.5,
        colors: ["transparent"]
      },
      series: [
        {
          name: "Traffic In",
          data: [
            44,
            55,
            57,
            56,
            61,
            58,
            63,
            61,
            66,
            21,
            44,
            55,
            57,
            56,
            61,
            58,
            63,
            61,
            66,
            21,
            33,
            22,
            11,
            55
          ]
        },
        {
          name: "Traffic Out",
          data: [
            76,
            85,
            111,
            98,
            87,
            115,
            91,
            114,
            94,
            76,
            85,
            111,
            98,
            87,
            115,
            91,
            114,
            94,
            76,
            85,
            111,
            77,
            98,
            87
          ]
        }
      ],
      xaxis: {
        categories: [
          "1",
          "",
          "3",
          "",
          "5",
          "",
          "7",
          "",
          "9",
          "",
          "11",
          "",
          "13",
          "",
          "15",
          "",
          "17",
          "",
          "19",
          "",
          "21",
          "",
          "23",
          ""
        ]
      },
      yaxis: {},
      fill: {
        opacity: 1
      },
      tooltip: {
        y: {
          formatter: function(val) {
            return " " + val + " Calls";
          }
        }
      }
    };

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

    chart.render();
    </script>

如何在我的javascript条形码中使用这个网址(例如：http://localhost/icx/test/link.html)？如果任何人有任何想法，请帮助

Answer 1

当您说“存储在URL中的json数据”时，您的意思是这样的吗？

http://localhost/icx/test/link.html?data=example_data

这就是所谓的获取数据。如果您将所有给定数据都存储在URL中，这是一个不太好的主意，因为URL的长度是有限制的(，通常是2048个字符，)。

至于显示条形图，像canvasJS这样的插件可以很好地帮助你，there就是首页上的一个代码示例。

Answer 2

您应该使用AJAX和jQuery从链接中获取数据，如下所示：

$(document).ready(function () {
var output=[];
  $.ajax('path of your link', 
  {
    dataType: 'json', // type of response data
    timeout: 500,     // timeout milliseconds
    success: function (data,status,xhr) {   // success callback function
        console.log(data);
        output=data;
        /** Here you have to separate data received from link into 3 different array variables which then you can use in chart code where right now you have static array. **/
    },
    error: function (jqXhr, textStatus, errorMessage) { // error callback 
        console.log('Error: ' + errorMessage);
    }
  });
});