如何使用本地JSON文件创建JavaScript版ApexCharts图表

你的JSON引入方式、字段访问写法都没有问题，df['liked']和df.liked两种属性访问写法都是合法的，图表无法渲染是配置写法不符合ApexCharts的规范，共有4处错误：

• series 字段必须传数组，不能直接传单个系列对象
• 分类类型的X轴，标签数据要放在 xaxis.categories 字段下，不存在xaxis.data这个配置项
• 分类X轴的type合法值为category，你写的string不是支持的类型
• X轴标签样式配置的字段名是labels（复数），你写的单数label不会生效

先确认你导入的processed.json结构和你取值的逻辑匹配：

• 如果JSON是键对应数组的结构，示例如下，可以直接取df.liked、df.name使用：

{
  "name": ["条目1", "条目2", "条目3", "条目4"],
  "liked": [12, 25, 18, 32]
}

• 如果JSON是对象数组的结构，示例如下，需要先提取对应字段再传入配置：

[
  {"name": "条目1", "liked": 12},
  {"name": "条目2", "liked": 25},
  {"name": "条目3", "liked": 18},
  {"name": "条目4", "liked": 32}
]

对应提取代码：

const df = require('data/processed.json');
const xCategories = df.map(item => item.name);
const seriesData = df.map(item => item.liked);

如果不确定JSON加载是否正常，可以在require语句后加console.log(df)，在控制台确认数据结构、路径都正确，没有出现undefined的情况。

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改为数组格式
        series: [{
            name: 'Liked',
            data: df.liked
        }],
        legend: {
            position: 'top',
        },
        xaxis: {
            // 修正：X轴类型改为category
            type: 'category',
            // 修正：X轴标签数据放在categories字段
            categories: df.name,
            axisBorder: {
                show: false,
            },
            // 修正：字段名改为复数labels
            labels: {
                style: {
                    color: '#ccc'
                }
            },
        },
        yaxis: {
            show: true,
            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();

内容的提问来源于stack exchange，提问作者Dicky C