使用JSON填充柱状图时Y轴定义域Max值获取错误

看起来你遇到的问题大概率是数据类型不匹配导致的——我注意到你的sample_data里num_products都是字符串格式（比如"12"），而不是数字类型。直接用字符串来计算Y轴最大值的话，JavaScript会按字符串的字典序规则比较，结果自然会出错（比如"10"和"7"比较时，字符串"10"会被认为比"7"小，因为第一个字符"1"的ASCII码小于"7"）。

解决步骤 #

1. 修正数据格式（先修复JSON语法错误）
   你给出的sample_data有语法问题，category字段后面直接跟对象数组是无效的，应该是一个数组包裹所有分类对象，修正后的格式如下：

   const sample_data = [
     {"categoryname":"Beverages","num_products":"12"},
     {"categoryname":"Condiments","num_products":"12"},
     {"categoryname":"Confections","num_products":"13"},
     {"categoryname":"Dairy Products","num_products":"10"},
     {"categoryname":"Grains/Cereals","num_products":"7"},
     {"categoryname":"Meat/Poultry","num_products":"6"}
   ];
   

2. 将字符串类型的数值转换为数字
   把每个对象里的num_products从字符串转成整数，这样才能正确计算最大值：

   // 提取并转换所有产品数量为数字
   const productCounts = sample_data.map(item => parseInt(item.num_products, 10));
   

3. 计算Y轴的正确最大值
   用转换后的数字数组计算最大值，建议给最大值加一点缓冲（比如乘以1.1），让柱状图顶部留一些空白，视觉效果更好：

   const maxYValue = Math.max(...productCounts) * 1.1;
   

4. 在图表配置中设置Y轴最大值
   以常用的Chart.js为例，在图表的options里配置Y轴的max属性：

   const barChart = new Chart(document.getElementById('your-chart-id'), {
     type: 'bar',
     data: {
       labels: sample_data.map(item => item.categoryname),
       datasets: [{
         label: 'Number of Products',
         data: productCounts, // 使用转换后的数字数组
         backgroundColor: '#2196F3',
         borderColor: '#1976D2',
         borderWidth: 1
       }]
     },
     options: {
       scales: {
         y: {
           beginAtZero: true,
           max: maxYValue // 设置计算好的正确最大值
         }
       }
     }
   });
   

关键提醒 #

如果使用的是其他图表库（比如ECharts、Highcharts），核心思路是一样的：确保用于计算Y轴范围的是数字类型，而非字符串。另外，一定要检查JSON数据的语法正确性，语法错误也会导致数据解析异常，进而影响图表渲染。

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