如何使用JSON本地文件创建ApexCharts（JavaScript）？

Question

正如标题所说，我想使用我已经事先下载的JSON数据创建ApexChart，

我已经在Internet中搜索了JSON数据使用：

const df = require（'data/processed.json'）;

我已经试图将其称为df ['like']，为y和df ['name']，因为

我想念的东西吗？ 或打电话给专栏不会这样做？ 我还尝试了DF.Liked和DF.Name，BTW

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 here

Answer 1

尝试使用：

 const df = fetch("./data/processed.json")
        .then(response => {
            return response.json();
        })

的文档

关于获取方式 将在您的JSON上捕获所有数据，并在您的 const df 中使用返回:)

如果要使用 require（）查看： https://requirejs.org/

注意：尝试使用很多 console.log（） 调试您的JS应用程序。