如何调整AmCharts中负值折线图的背景颜色填充范围

当然可以实现你想要的效果！默认情况下，AmCharts的LineSeries填充区域是从曲线延伸到0值基准线，要改成从Y轴底部（这里是-10）到曲线，只需要调整系列的fillToAxis属性即可。

核心原理 #

LineSeries有个fillToAxis配置项，默认值是null（表示填充到0线），我们只需要将它设置为我们创建的Y轴实例，就能让填充区域从曲线延伸到该坐标轴的最小值位置（也就是你设置的-10）。

修改后的完整代码 #

下面是调整后的JS代码，我标注了新增的关键行：

am4core.ready(function() {
  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  // Create chart instance
  var chart = am4core.create("chartdiv", am4charts.XYChart);

  // Add data
  chart.data = [
    { "date": "2012-07-27", "value": -5 },
    { "date": "2012-07-28", "value": -6 },
    { "date": "2012-07-29", "value": -4 },
    { "date": "2012-07-30", "value": -7 },
    { "date": "2012-07-31", "value": -5 },
    { "date": "2012-08-01", "value": -3 },
    { "date": "2012-08-02", "value": -2 }
  ];

  // Create axes
  var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
  dateAxis.renderer.grid.template.location = 0;
  dateAxis.renderer.minGridDistance = 50;

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.min = -10;
  valueAxis.max = 0;

  // Create series
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = "value";
  series.dataFields.dateX = "date";
  series.strokeWidth = 3;
  series.fillOpacity = 0.5;
  // 新增：设置填充区域延伸到我们定义的Y轴
  series.fillToAxis = valueAxis;

  // Add vertical scrollbar
  chart.scrollbarY = new am4core.Scrollbar();
  chart.scrollbarY.marginLeft = 0;

  // Add cursor
  chart.cursor = new am4charts.XYCursor();
  chart.cursor.behavior = "zoomY";
  chart.cursor.lineX.disabled = true;
}); // end am4core.ready()

效果说明 #

添加series.fillToAxis = valueAxis;这行代码后，蓝色填充区域就会从你设置的Y轴最小值（-10，图表底部）开始，向上延伸到曲线位置，完全符合你的需求。

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