代码之家 › 专栏 › 技术社区 › Î²Î³Î¹ Robert Longson

广告牌js可选Y网格线-标签背景样式

billboard.js charts javascript

Î²Î³Î¹ Robert Longson · 技术社区 · 7 年前

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

我似乎弄不明白的是,在谈论背景色时,如何在文本中添加自定义样式。似乎您无法将样式添加到svg g元素(在billboard中,您可以获得svg <g> 包含 <line> 和a <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"
});

<!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>  
    </body>
    </html>

1 回复 | 直到 7 年前

Jae Sung Park 7 年前

grid.y.lines 选项也接受“class”值。

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

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

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");
}

<!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>