如何去除属性形状图表背景中的网格线？

Question

我正在开发一个 React JS 项目。 在我的项目中，我需要创建折线图组件。 我正在尝试将React Plotly.js库用于 React JS。 我对 shape 属性进行了一些更改，以便为每个狙击手数据显示不同的颜色数组。

图片说明

这是我的代码

export const convertListIc = [{
layer: "below",
x0: 0,
y0: 0,
x1: 1.31,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "black",
opacity: 0.6,},{
layer: "below",
x0: 1.31,
y0: 0,
x1: 2.05,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "grey",
opacity: 0.6,},{
layer: "below",
x0: 2.05,
y0: 0,
x1: 2.6,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "green",
opacity: 0.6,},{
layer: "below",
x0: 2.6,
y0: 0,
x1: 2.95,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "yellow",
opacity: 0.6,},{
layer: "below",
x0: 2.95,
y0: 0,
x1: 3.06,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "red",
opacity: 0.6, },{
layer: "below",
x0: 3.06,
y0: 0,
x1: 4.0,
y1: 1,
type: "rect",
xref: "x",
yref: "paper",
fillcolor: "brown",
opacity: 0.6,},];

有没有办法摆脱那些彩色区域之间的黑色垂直网格？

Answer 1

您可以使用以下方法从背景中删除所有网格线：

var data = ...
var layout = {
    xaxis: {
    showgrid: False
     },
    yaxis: {
     showgrid: False
    }
   };

 Plotly.newPlot('myDiv', data,layout);