顶点图表的 Json 数据答案

【问题标题】：Json data for apexcharts顶点图表的 Json 数据
【发布时间】：2020-02-12 21:03:38
【问题描述】：

我在从我的 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>

如果有人可以给我提示，不胜感激。

【问题讨论】：

你能解释一下，你现在有什么，你想实现什么
感谢您的回复，我设法解决了问题
酷，能否请您在答案部分添加您的解决方案，以便其他用户可以使用此

标签： javascript json apexcharts

【解决方案1】：

JSON 看起来像这样，用于检索顶点图的数据

{
   "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
            }
         ]
      }

   ],

【讨论】：