修改后的示例代码:
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
}
}]
});
关键点
-
数据提取在外部完成:
- 使用
Object.keys(jsonData)遍历每个月的数据,并将a,b,c,d对应的数据分别存储在dataA,dataB,dataC,dataD数组中。这个数据处理逻辑放在Highcharts.chart外部。
- 使用
-
判断是否所有数据都为 0:
- 合并所有数据并使用
every()函数检查是否全为 0,如果是,则在 Y 轴中设置min和max值。
- 合并所有数据并使用
-
Highcharts 配置中只专注于渲染:
Highcharts.chart只负责接收外部处理好的数据dataA,dataB,dataC,dataD并将它们渲染出来。