js提取数据json数据,进行判断

73 阅读2分钟

修改后的示例代码:

javascript
コードをコピーする
// 定义 JSON 数据(在 Highcharts.chart 外部)
var jsonData = {
    "1月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "2月": { "a": 0, "b": 0, "c": 0, "d": 0 },
    "3月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "4月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "5月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "6月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "7月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "8月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "9月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "10月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "11月": { "a": 0, "b": 1, "c": 2, "d": 3 },
    "12月": { "a": 0, "b": 1, "c": 2, "d": 3 }
};

// 提取数据系列
var dataA = [], dataB = [], dataC = [], dataD = [];
Object.keys(jsonData).forEach(function(month) {
    dataA.push(jsonData[month].a);
    dataB.push(jsonData[month].b);
    dataC.push(jsonData[month].c);
    dataD.push(jsonData[month].d);
});

// 判定所有值是否为 0
var allData = dataA.concat(dataB, dataC, dataD);
var allZero = allData.every(function(value) {
    return value === 0;
});

// 在 Highcharts 配置中引用处理后的数据
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '每个月的 A, B, C, D 数据'
    },
    xAxis: {
        categories: Object.keys(jsonData),  // 自动从 jsonData 获取月份
        lineWidth: 1,
        tickWidth: 0
    },
    yAxis: {
        // 如果所有数据都为 0,设置 Y 轴的 min 和 max
        min: allZero ? 0 : undefined,
        max: allZero ? 10 : undefined,
        title: {
            text: 'Values'
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '数据 A',
        data: dataA
    }, {
        name: '数据 B',
        data: dataB
    }, {
        name: '数据 C',
        data: dataC
    }, {
        type: 'line',  // 数据 D 使用曲线图
        name: '数据 D',
        data: dataD,
        marker: {
            enabled: true
        }
    }]
});

关键点

  1. 数据提取在外部完成

    • 使用 Object.keys(jsonData) 遍历每个月的数据,并将 a, b, c, d 对应的数据分别存储在 dataA, dataB, dataC, dataD 数组中。这个数据处理逻辑放在 Highcharts.chart 外部。
  2. 判断是否所有数据都为 0

    • 合并所有数据并使用 every() 函数检查是否全为 0,如果是,则在 Y 轴中设置 minmax 值。
  3. Highcharts 配置中只专注于渲染

    • Highcharts.chart 只负责接收外部处理好的数据 dataA, dataB, dataC, dataD 并将它们渲染出来。