Estoy tratando de crear un gráfico alto en el que en el eje x necesito trazar fechas y en el eje y se trazarán los datos. Tengo otra columna en db, en base a eso, necesito colorear el fondo (es decir, si el valor es 1, el fondo será amarillo, de lo contrario, blanco en caso de 0) como se muestra en la imagen.
.
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], // ], // }, // ], };No puedo agregar este color de fondo basado en esta bandera. Por favor ayuda. Cualquier ayuda sería muy apreciada. ¡Gracias!
los datos que estoy usando son:
Puede usar tramas generadas mediante programación. Por ejemplo:
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 }, ... };Demostración en vivo: http://jsfiddle.net/BlackLabel/95gcsheo/
Referencia de la API: https://api.highcharts.com/highcharts/xAxis.plotBands