Como dice el título, quiero crear apexchart usando datos json que descargué de antemano
Ya busqué en Internet para obtener el uso de datos json:
const df= require('datos/procesado.json');
Y ya traté de llamarlo df['me gusta'] como y y df['nombre'] como x
¿Hay algo que extraño? O llamar a la columna no lo va a hacer? También probé df.liked y df.name, por cierto
const df= require('data/processed.json'); var options = { chart: { height: 230, type: 'line', toolbar: { show: false, }, }, dataLabels: { enabled: false }, stroke: { width: 2, curve: 'smooth' }, series: { name: 'Liked', data: df['liked'] }, legend: { position: 'top', }, xaxis: { type: 'string', data: df['name'], axisBorder: { show: false, }, label: { style: { color: '#ccc' } }, }, yaxis: { show: true, // min: 10, // max: 70, labels: { style: { color: '#ccc' } } }, colors: ['#73b4ff', '#59e0c5'], fill: { type: 'gradient', gradient: { shade: 'light', gradientToColors: ['#4099ff', '#2ed8b6'], shadeIntensity: 0.5, type: 'horizontal', opacityFrom: 1, opacityTo: 1, stops: [0, 100] }, }, markers: { size: 5, colors: ['#4099ff', '#2ed8b6'], opacity: 0.9, strokeWidth: 2, hover: { size: 7, } }, grid: { borderColor: '#cccccc3b', } } var chart = new ApexCharts(document.querySelector("#unique-visitor-chart"), options); chart.render(); enter code heretratar de usar :
const df = fetch("./data/processed.json") .then(response => { return response.json(); }) De esta manera, capturará todos los datos en su json y los colocará en su const df usando el retorno :)
Si desea utilizar require() , consulte: https://requirejs.org/
NOTA: intente usar mucho console.log() para depurar su aplicación js.