如何修复C3折线图使用regions选项时的虚线缺失问题？

问题出在你仅定义了regions的范围，但未配置虚线样式。C3的regions默认是填充背景，不会自动显示虚线边框，需要手动添加样式配置：

修改regions配置 #

在你的regions对象中，给目标区域添加style属性，指定虚线相关样式：

regions: {
  'year': [{
    end: 11,
    style: {
      fill: 'none', // 取消填充，只显示边框
      stroke: '#666', // 虚线颜色
      'stroke-width': 2, // 虚线宽度
      'stroke-dasharray': '5,5' // 虚线间隔，数值可调整
    }
  }]
}

补充：如果是想让year线条本身变成虚线 #

若你实际需求是把year这条水平线改成虚线（而非regions区域的虚线边框），则不需要用regions，直接在data.styles里配置：

data: {
  types: {
    // ... 原有类型配置
  },
  styles: {
    year: {
      'stroke-dasharray': '5,5' // 设置线条为虚线
    }
  },
  // ... 原有regions配置（如果不需要区域背景可移除）
}

完整修改后的代码示例 #

var chart = c3.generate({
data: {
    types: {
        firstWeekData: 'bar',
        secondWeekData: 'bar',
        thirdWeekData: 'bar',
        fourthWeekData: 'bar',
        fifthWeekData: 'bar',
        monthData: 'line',
        year: 'line',
        refLine: 'line'
    },
    styles: {
        year: {
            'stroke-dasharray': '5,5' // 若需year线条为虚线则添加此配置
        }
    },
    regions: {
        'year': [{
            end: 11,
            style: {
                fill: 'none',
                stroke: '#666',
                'stroke-width': 2,
                'stroke-dasharray': '5,5'
            }
        }]
    },
    columns: [
        ["firstWeekData", 7.627, 5.766, 8.302, 6.261, 7.592, 5.663, 8.978, 6.627, 9.961, 7.557, 7.366, 7.281],
        ["secondWeekData", 7.087, 8.138, 8.058, 5.726, 9.218, 7.265, 8.307, 6.821, 12.687, 7.693, 7.12, 8.987],
        ["thirdWeekData", 7.363, 8.122, 8.157, 6.123, 8.702, 7.85, 9.103, 0, 7.127, 7.24, 6.699, 8.451],
        ["fourthWeekData", 7.204, 8.414, 7.718, 7.846, 7.342, 10.356, 4.648, 9.153, 7.359, 0, 5.834, 9.735],
        ["fifthWeekData", 0, 0, 7.871, 0, 0, 7.535, 0, 8.597, 7.633, 0, 7.61, 7.729],
        ["monthData", 7.309, 7.636, 7.992, 6.397, 8.293, 8.03, 7.784, 8.332, 8.171, 7.537, 7.037, 8.545],
        ["year", 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789, 7.789],
        ["refLine", 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
    ],
},
point: {
    r: function (d) {
        if (d.id === 'refLine' || d.id === 'year') return 0
        return 5
    },
    show: true
},
bar: {
    width: 8,
    space: 0.1
},
axis: {
    x: {
        type: 'category',
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
},
line: {
    connectNull: true
}
});

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