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 } ] } ],