Britechart - Как добавить изображения иконок на график по оси Y - PullRequest
Новая
       130

Britechart - Как добавить изображения иконок на график по оси Y

0 голосов
/ 22 марта 2020

Я использую Vue с Britecharts, и я создал горизонтальную гистограмму, а затем я хочу добавить изображения аватара к оси Y справа от метки имени. Я провел некоторое исследование и нашел D3. Как разместить изображение рядом с текстом горизонтальной линии и . Этот сделал именно то, чего я хочу достичь, но в D3.

Я хочу знать, как я могу сделать то же самое в Britecharts. Ниже приведен мой пример кода.

Codepen: https://codepen.io/cooltaiwanesesam/pen/RwPYpbz

createHorizontalBarChart() {
    let barChart = new britecharts.bar(),
        margin = {left: 120, right: 20, top: 20, bottom: 30},
        barContainer = d3.select('.js-horizontal-bar-chart-container'),
        containerWidth = barContainer.node() ? barContainer.node().getBoundingClientRect().width : false;

    barChart
       .isHorizontal(true)
       .margin(margin)
       .width(containerWidth)
       .colorSchema(britecharts.colors.colorSchemas.britecharts)
       .valueLabel('percentage')
       .height(300);

    barContainer.datum(this.data.reverse()).call(barChart); 
}

1 Ответ

0 голосов
/ 14 апреля 2020

Проблема решена. Совместное использование кода, чтобы помочь кому-то нуждающемуся.

https://codepen.io/cooltaiwanesesam/pen/YzyXYWE

barChart
  .isHorizontal(true)
  .width(containerWidth)
  .height(300);

barContainer.datum(dataset).call(barChart);

d3.selectAll('.y-axis-group .tick')
  .each((d, i, list) => {        
    let img = barData.data.find((item) => item.name === d).img;

    d3.select(list[i])
      .append('image')
      .attr('x', -36)
      .attr('y', -22)
      .attr('width', 42)
      .attr('height', 42)
      .attr('xlink:href', img)
  });

Ссылка: https://github.com/eventbrite/britecharts/issues/798 Благодаря Маркосу из Britecharts.

...