Charts.js自定义X轴：混合柱状折线图X轴独立配置方法

要让X轴摆脱柱状图数据点的限制，自主设置最值和步长，核心是把X轴从类目轴切换为数值轴，再适配图表系列的配置，以下是主流图表库的实现方案：

ECharts 实现方案 #

1. 修改X轴类型为数值轴
   把默认的类目轴type: 'category'改成数值轴type: 'value'，然后直接配置min（最小值）、max（最大值）、interval（步长）参数：

   xAxis: {
     type: 'value',
     min: 0, // 自定义最小值
     max: 100, // 自定义最大值
     interval: 10, // 自定义步长
     axisLabel: {
       formatter: '{value}' // 轴标签格式
     }
   }
   

2. 适配柱状图系列配置
   数值轴下，柱状图需要明确每个柱子的X轴位置和宽度，通过data的对象格式指定：

   series: [
     // 柱状图系列
     {
       type: 'bar',
       name: '柱状数据',
       data: [
         { value: [10, 25], itemStyle: { width: 15 } }, // [X坐标, Y值]，width设置柱子宽度
         { value: [30, 40], itemStyle: { width: 15 } },
         { value: [50, 32], itemStyle: { width: 15 } },
         { value: [70, 55], itemStyle: { width: 15 } }
       ],
       yAxisIndex: 0 // 对应左侧Y轴
     },
     // 折线图系列
     {
       type: 'line',
       name: '折线数据',
       data: [[0, 10], [20, 22], [40, 35], [60, 48], [80, 52], [100, 45]], // [X坐标, Y值]
       yAxisIndex: 1, // 对应右侧Y轴（可选，双Y轴）
       smooth: true
     }
   ]
   

3. 完整配置示例

   var myChart = echarts.init(document.getElementById('main'));
   var option = {
     title: { text: '自定义X轴的混合图表' },
     tooltip: { trigger: 'axis' },
     legend: { data: ['柱状数据', '折线数据'] },
     xAxis: {
       type: 'value',
       min: 0,
       max: 100,
       interval: 10,
       axisLine: { lineStyle: { color: '#333' } }
     },
     yAxis: [
       { type: 'value', name: '柱状数值', axisLabel: { formatter: '{value}' } },
       { type: 'value', name: '折线数值', axisLabel: { formatter: '{value}' }, position: 'right' }
     ],
     series: [
       {
         type: 'bar',
         name: '柱状数据',
         data: [
           { value: [10, 25], itemStyle: { width: 15 } },
           { value: [30, 40], itemStyle: { width: 15 } },
           { value: [50, 32], itemStyle: { width: 15 } },
           { value: [70, 55], itemStyle: { width: 15 } }
         ]
       },
       {
         type: 'line',
         name: '折线数据',
         data: [[0, 10], [20, 22], [40, 35], [60, 48], [80, 52], [100, 45]],
         yAxisIndex: 1,
         smooth: true,
         lineStyle: { width: 2 },
         symbolSize: 6
       }
     ]
   };
   myChart.setOption(option);
   

Matplotlib 实现方案 #

如果用Python的Matplotlib，思路类似：

1. 设置X轴的范围和刻度：

   import matplotlib.pyplot as plt
   
   # 设置X轴范围和步长
   x_min = 0
   x_max = 100
   x_step = 10
   plt.xlim(x_min, x_max)
   plt.xticks(range(x_min, x_max+1, x_step))
   

2. 绘制柱状图和折线图：

   # 柱状图的X位置和数据
   bar_x = [10, 30, 50, 70]
   bar_y = [25, 40, 32, 55]
   plt.bar(bar_x, bar_y, width=15, label='柱状数据')
   
   # 折线图的X和数据
   line_x = [0, 20, 40, 60, 80, 100]
   line_y = [10, 22, 35, 48, 52, 45]
   plt.plot(line_x, line_y, marker='o', label='折线数据', linewidth=2)
   
   plt.legend()
   plt.show()
   

这样配置后，X轴就完全独立于柱状图的数量，你可以根据需求随意调整min、max和步长参数。

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