Блок-схема в Highcharts с добавлением списка и разрывов строк - PullRequest
Новая
       13

Блок-схема в Highcharts с добавлением списка и разрывов строк

0 голосов
/ 14 сентября 2018

https://jsfiddle.net/ermacwins/817zry6a/7/

Я создаю блок-схему

3 вещи застряли у меня

1 (нижние синие прямоугольники)

Я могу добавить1 разрыв строки Я не могу добавить 2 переноса строки.2-йпросто игнорируется

2 (нижние синие прямоугольники)

Не удается добавить неупорядоченный список Теги html игнорируются.

3

Не удается получитьизменение вида стрелки (откормленное или укороченное) 

Highcharts.chart('container', {
  chart: {
    backgroundColor: 'white',
    events: {
      load: function() {

        //Draw the flow chart
        var ren = this.renderer,
          colors = Highcharts.getOptions().colors,
          rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
          leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];

        // Headers
        ren.label('', 20, 40)
          .css({
            fontWeight: 'bold'
          })
          .add();
        ren.label('', 220, 40)
          .css({
            fontWeight: 'bold'
          })
          .add();
        ren.label('', 440, 40)
          .css({
            fontWeight: 'bold'
          })
          .add();

        // Top labels
        ren.label('Risk<br/>Rewards', 10, 82)
          .attr({
            fill: colors[2],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 90,
            width: 110
          })
          .css({
            color: 'black'
          })
          .add()
          .shadow(true);

        ren.label('The<br/>Determination', 160, 82)
          .attr({
            fill: colors[2],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 90,
            width: 110
          })
          .css({
            color: 'black'
          })
          .add()
          .shadow(true);

        ren.label('Action<br/>Packed Theme', 310, 82)
          .attr({
            fill: colors[2],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 90,
            width: 110
          })
          .css({
            color: 'black'
          })
          .add()
          .shadow(true);

        ren.label('Awaiting<br/>Your<br/>Reply', 460, 82)
          .attr({
            fill: colors[2],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 90,
            width: 110
          })
          .css({
            color: 'black'
          })
          .add()
          .shadow(true);

        ren.label('Final<br/>Destination', 610, 82)
          .attr({
            fill: colors[2],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 90,
            width: 110
          })
          .css({
            color: 'black'
          })
          .add()
          .shadow(true);

        // Arrow
        ren.path(rightArrow)
          .attr({
            'stroke-width': 2,
            stroke: colors[1]
          })
          .translate(120, 100)
          .add();


        // Bottom labels
        ren.label('84 cases<br/>Chemistry characterization', 30, 135)
          .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 100
          })
          .css({
            color: 'white',
            width: '110px',
            fontSize: '8px'
          })
          .add()
          .shadow(true);

        ren.label('1285 colors<br/><br/>Cases in dialogue', 180, 135)
          .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 100
          })
          .css({
            color: 'white',
            width: '110px',
            fontSize: '8px'
          })
          .add()
          .shadow(true);

        ren.label('60 drones<br/><br/>Sources are to<br/> be be named', 330, 135)
          .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 100
          })
          .css({
            color: 'white',
            width: '110px',
            fontSize: '8px'
          })
          .add()
          .shadow(true);

        ren.label('1162 metals<br/>Awaiting signatures<br/>Cases unknown', 480, 135)
          .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 100
          })
          .css({
            color: 'white',
            width: '110px',
            fontSize: '8px'
          })
          .add()
          .shadow(true);

        ren.label('', 630, 135)
          .attr({
            fill: colors[0],
            stroke: 'white',
            'stroke-width': 2,
            padding: 5,
            r: 5,
            height: 100,
            width: 110
          })
          .css({
            color: 'white',
            width: '110px',
            fontSize: '8px'
          })
          .add()
          .shadow(true);
      }
    }
  },
  title: {
    text: 'Active directory Projections',
    style: {
      color: 'black'
    }
  }

});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

1 Ответ

0 голосов
/ 14 сентября 2018

Прежде всего, вам нужно отредактировать ваше сообщение и добавить соответствующую ссылку в пример JSFiddle.

Я могу добавить 1 разрыв строки, я не могу добавить 2 разрывы строки.Второй просто игнорируется

Это потому, что каждая строка, предоставляемая renderer методам, анализируется по некоторым правилам, и, среди прочего, два и более элемента <br/>, размещенных один за другим, не соблюдаются.Для того, чтобы это работало, просто нужно установить параметр baseline равным true при создании метки, тогда это должен быть фактически элемент HTML вместо <tspan>.

Я не могудобавить неупорядоченный список html-теги игнорируются.

Как и раньше, если вы установите baseline, то <ul> должно быть видно.Вот код: 

ren.label('1285 colors<br/><br/>Cases in dialogue:<br/><ul><li>Something...</li></ul>', 180, 135, "rect", 0, 0, true)

Не удается изменить внешний вид стрелки (откормить или укоротить)

Это не имеет большого значения, потому что достаточноНемного измените путь на стрелке и увеличьте его параметр stroke-width, чтобы он стал жирным, например: 

var rightArrow = ['M', 0, 0, 'L', 45, 0, 'L', 40, 10, 'M', 45, 0, 'L', 40, -10],

    ren.path(rightArrow)
      .attr({
        'stroke-width': 4,
        stroke: colors[1]
      })
      .translate(120, 100)
      .add();

Пример в реальном времени: http://jsfiddle.net/e8twxurz/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

...