如何根据标志在 highchart 上添加背景颜色？

Question

我正在尝试创建 highchart，其中我需要在 x 轴上绘制日期，在 y 轴上绘制数据。我在数据库中有另一列，基于我需要为背景着色（即，如果值为 1，则背景将为黄色，否则为 0 时为白色），如图所示。
.

const series = warData.map((m) => {
    return {
      name: m.Month,
      data: [[m.Month.toString(), JSON.parse(m.Maintenance)]],
    };
  });
  console.log(series);
  // console.log(warData);
  const options = {
    chart: {
      type: "column",
    },
    title: {
      text: "",
    },
    legend: {
      verticalAlign: "bottom",
      enabled: false,
    },
    credits: false,
    yAxis: {
      title: {
        text: "Maintenance Cost",
        style: {},
      },
    },
    xAxis: {
      type: "category",
    },
    series: series,
    //colors: ["#4690e6"],
    // series: [
    //   {
    //     data: [
    //       ["cate", 7],
    //       ["gories", 2],
    //     ],
    //   },
    // ],
  };

我无法根据这个标志添加这个背景颜色。请帮忙。任何帮助将不胜感激。谢谢！

我使用的数据是：

Answer 1

您可以使用程序生成的 plot-bands。例如：

const plotBands = [];
const series = warData.map((m, index) => {
  if (m.flag === 1) {
    plotBands.push({
      color: 'yellow',
      from: index - 0.5,
      to: index + 0.5
    });
  }

  return {
    name: m.Month,
    data: [
      [m.Month.toString(), JSON.parse(m.Maintenance)]
    ],
  };
});


const options = {
  xAxis: {
    type: "category",
    plotBands
  },
  ...
};

现场演示： http://jsfiddle.net/BlackLabel/95gcsheo/

API参考：https://api.highcharts.com/highcharts/xAxis.plotBands

如何根据标志在 highchart 上添加背景颜色？

How to add background color on highchart based on flag?

javascript

angular

typescript

highcharts