Question

所以，如果我是来自billboard.js文档的duplicating this example，那么添加可选的Y网格线似乎很容易。这是我想要的，因为我在不同的场景中动态添加它们。

我似乎无法弄清楚的是在谈论背景颜色时如何在文本中添加自定义样式。看起来你无法为svg g元素添加样式（在广告牌中你得到一个包含ldsfld ... foo和<g>的svg <line>元素。

因此，如果我想让文化元素看起来像是某种让我们说的绿色泡泡，那么有没有办法实现呢？

<text>

var chart = bb.generate({
  data: {
    columns: [
	["sample", 30, 200, 100, 400, 150, 250],
	["sample2", 1300, 1200, 1100, 1400, 1500, 1250]
    ],
    axes: {
      sample2: "y2"
    }
  },
  axis: {
    y2: {
      show: true
    }
  },
  grid: {
    y: {
      lines: [
        {
          value: 50,
          text: "Label with some bublly background"
        },
        {
          value: 1300,
          text: "Label 1300 for bubbly style",
          axis: "y2",
          position: "start"
        },
        {
          value: 350,
          text: "Label 350 for y",
          position: "middle"
        }
      ]
    }
  },
  bindto: "#OptionalYGridLines"
});

Answer 1

grid.y.lines选项接受＆＃39; class＆＃39;价值也是。

因此，如果您需要为文本自定义一些样式，您可以执行以下操作：

grid: {
    y: {
      lines: [
        {
          value: 350,
          text: "Label 350 for y",
          position: "middle",
          class: "test-name"
        }
      ]
    }
}

// apply to specific grid line text
.test-name text { fill: red }

// to apply all grid text
.bb-grid text { fill:red }

顺便说一下，没有办法为svg的文本元素设置背景颜色。

Background color of text in SVG

＆＃13;

var chart = bb.generate({
      data: {
        columns: [
    	["sample", 30, 200, 100, 400, 150, 250],
    	["sample2", 1300, 1200, 1100, 1400, 1500, 1250]
        ],
        axes: {
          sample2: "y2"
        }
      },
      axis: {
        y2: {
          show: true
        }
      },
      grid: {
        y: {
          lines: [
            {
              value: 50,
              text: "Label with some bublly background"
            },
            {
              value: 1300,
              text: "Label 1300 for bubbly style",
              axis: "y2",
              position: "start"
            },
            {
              value: 350,
              text: "Label 350 for y",
              position: "middle"
            }
          ]
        }
      },
      bindto: "#OptionalYGridLines"
});
    
    
function addBackground() {
	const index = document.querySelector("#index").value;
	const grid = chart.internal.main.select(`.bb-ygrid-line:nth-child(${index})`);
	const text = grid.select("text").node().getBBox();
	
	grid.insert("rect", "text")
		.attr("width", text.width)
		.attr("height", text.height)
		.attr("x", text.x)
		.attr("y", text.y)
		.style("fill", "#38ff00");
}

＆＃13;

<!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
          <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
          <title>JS Bin</title>
        </head>
        <body>
          <div id="OptionalYGridLines"></div>  
          
          <input type="number" id="index" style="width:40px" value=3>
          <button onclick="addBackground()">Add background</button>
        </body>
        </html>

＆＃13;

Billboard.js可选的Y网格线 - 标签背景的样式

1 个答案: