Billboard.js необязательные линии сетки Y - стиль для фона метки - PullRequest
Новая
       34

Billboard.js необязательные линии сетки Y - стиль для фона метки

0 голосов
/ 08 мая 2018

Так что, если я дублирую этот пример из документации billboard.js, кажется, легко добавить дополнительные линии сетки Y. Это то, чего я хочу, так как я добавляю их динамически в другом сценарии.

То, что я не могу понять, это то, как добавить собственный стиль к тексту, когда речь идет о цвете фона. Кажется, что вы не можете добавить стиль к элементу svg g (в билборде вы получаете элемент svg <g>, содержащий <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"
});
<!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 Ответ

0 голосов
/ 09 мая 2018

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. 

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