用于apexcharts的Json数据

Question

在我的apexchart系列中，我在呈现来自JSON的一些数据时遇到一些问题。

下面是我的图表示例，其中包含我想要放在JSON中的数据，但我不知道如何编写它。

​

var _seed = 42;
Math.random = function() {
    _seed = _seed * 16807 % 2147483647;
    return (_seed - 1) / 2147483646;
};

var options = {
    series: [{
        name: "Q",
        data: [0, 4800, 9500, null],
    },
    {
        name: "Q - 1",
        data: [0, 6500, 12000, 16000]
    },{

        name: "Q Target",
        data: [15500, 15500, 15500, 15500]

    },

    ],
    chart: {
      height: 350,
      type: 'line',
      zoom: {
        enabled: false
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'straight'
    },
    title: {
      text: 'Clicks',
      align: 'left'
    },
    grid: {
      row: {
        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
        opacity: 0.5
      },
    },
    xaxis: {
      categories: [' ', 'Month1', 'Month2', 'Month3'],
    }
};

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

#chart {
    max-width: 450px;
    margin: 35px auto;
}

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

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

​

如果有人能给我一点提示，不胜感激。

Answer 1

JSON如下所示，用于检索apexchart的数据

​

{
   "data_clicks":[
      {
         "name":"Q",
         "data":[
            {
               "x":" ",
               "y":0
            },
            {
               "x":"Month1",
               "y":2400
            },
            {
               "x":"Month2",
               "y":5200
            },
            {
               "x":"Month3",
               "y":null
            }
         ]
      },
      {
         "name":"Q - 1",
         "data":[
            {
               "x":" ",
               "y":0
            },
            {
               "x":"Month1",
               "y":1800
            },
            {
               "x":"Month2",
               "y":7150
            },
            {
               "x":"Month3",
               "y":10200
            }
         ]
      },
      {
         "name":"Q Target",
         "data":[
            {
               "x":" ",
               "y":11000
            },
            {
               "x":"Month1",
               "y":11000
            },
            {
               "x":"Month2",
               "y":11000
            },
            {
               "x":"Month3",
               "y":11000
            }
         ]
      }

   ],

​