使用react-rt-chart创建实时柱状图：仅显示折线而非柱状图

你遇到的问题出在配置结构错误和字段类型未明确指定这两点上，具体修正如下：

问题分析 #

1. 你的axis配置被错误地放在了data对象内部，react-rt-chart基于C3.js，axis是和data同级的顶级配置项，放在data里不会生效。
2. 仅给Current指定了line类型，但Predicted没有明确配置类型，全局type: "bar"会被types里的设置覆盖，导致未指定的字段无法按预期渲染为柱状图。

修正后的代码 #

import RTChart from 'react-rt-chart';

// 数据结构保持不变
const data = {
  date: Date.now(),
  Current: [1800],
  Predicted: [500],
}

// 修正配置结构和字段类型
const chart = {
  data: {
    types: {
      Current: 'line',
      Predicted: 'bar' // 明确指定Predicted为柱状图类型
    },
    type: "bar"
  },
  // 将axis移到chart根层级，和data同级
  axis: {
    y: { min: 0, max: 3000 }
  }
}

// 组件使用保持不变
<RTChart
  fields={['Current','Predicted']}
  data={data}
  chart={chart}
/>

关键修改点 #

• 把axis配置从data对象中移出，放到chart的根节点下，确保Y轴范围设置生效。
• 在data.types中给Predicted明确指定bar类型，让该字段渲染为柱状图，和Current的折线形成预期的混合图表效果。

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