在Rails项目中使用Highcharts formatter实现零值柱形不显示

Got it, let's fix this problem. You're trying to hide columns where the Y-value is 0 in your Rails Highcharts column chart, but your previous attempt with the formatter threw errors—and also, that approach was targeting the data labels, not the columns themselves. Let's break down the right solutions.

First: Understand the Core Issue #

Highcharts doesn't render columns for null values, so the simplest fix is to convert any 0 values in your dataset to nil (Ruby's equivalent of JS null) before passing it to the chart. If you can modify the data, this is the cleanest approach.

Solution 1: Preprocess Your Data in Rails #

In your controller or view, map over your @chart_data to replace 0 values with nil:

@chart_data = [[2015, 20], [2016, 31], [2017, 5], [2018, 19], [2019, 0]].map do |year, value|
  value == 0 ? [year, nil] : [year, value]
end

Then use your existing column_chart call as-is. Highcharts will automatically skip any nil Y-values, so the 2019 column won't render at all.

Solution 2: Modify Highcharts Configuration (No Data Changes) #

If you can't alter the original dataset, you can tell Highcharts to hide columns with Y=0 via plot options. The key is to target the column points themselves, not just the data labels. Also, your earlier error came from incorrect JavaScript string handling in the Rails view—use raw() to ensure the JS function is passed correctly to Highcharts.

Update your library configuration like this:

= column_chart @chart_data, height: '375px', library: { 
  xAxis: { title: { text: 'Years'} }, 
  yAxis: { stackLabels: { enabled: true, style: {color: '#8b9196'} }, title: { text: 'Turn over rate'} }, 
  plotOptions: { 
    column: { 
      dataLabels: { 
        enabled: true, 
        style: { color: 'white'},
        # Optional: Hide data labels for 0 values too
        formatter: raw("function() { return this.y > 0 ? this.y : null; }")
      },
      # Hide columns where Y=0
      point: {
        events: {
          load: raw("function() { if (this.y === 0) this.setVisible(false); }")
        }
      }
    } 
  }, 
  legend: { align: 'right', x: 0, verticalAlign: 'top', y: -10, floating: true, backgroundColor: 'white', borderColor: '#CCC', borderWidth: 1, shadow: false } 
}

• The raw() method prevents Rails from escaping the JavaScript function, which was causing your earlier error.
• The point.events.load function checks if the point's Y-value is 0 and hides the column if so.
• The optional data label formatter ensures you don't show a 0 label where there's no column.

Why Your Original Attempt Failed #

1. You were modifying the dataLabels.formatter, which only controls the text labels—not whether the column is drawn.
2. Using %|function(){...}| didn't properly pass the JavaScript function to Highcharts; Rails was likely escaping it, leading to syntax errors. Using raw() fixes this by treating the string as unescaped JavaScript.

I recommend starting with Solution 1—it's simpler and avoids any JS configuration headaches. If you need to keep the original data intact, go with Solution 2.

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