Highcharts 中的流程图添加列表和换行符

Question

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

我正在创建流程图

3 件事让我卡住了

1（底部蓝色框）

我可以加1个换行符我不能添加 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>

Answer 1

首先，您需要编辑 post 并将适当的 link 添加到 JSFiddle 示例。

I can add 1 line break I cannot add 2 line breaks. The 2nd just get ignored

这是因为提供给 renderer 方法的每个字符串都按照某些规则进行解析，其中不尊重两个或更多 <br/> 元素并排放置。为了让它工作，只需要在创建标签时将baseline参数设置为true，那么它实际上应该是HTML元素而不是<tspan>。

I cannot add an unordered list The html tags gets ignored.

就像以前一样，如果您设置 baseline，那么 <ul> 应该是可见的。这是代码：

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

Can't get the arrow's appearance to change (fattened or shortened)

没什么大不了的，因为稍微改变一下箭头上的路径，增加它的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参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

Highcharts 中的流程图添加列表和换行符

Flow chart in Highcharts adding list and line breaks

javascript

highcharts

flowchart

1（底部蓝色框）

2（底部蓝色框）

3