Highcharts General Drawing参数

时间:2016-06-16 07:01:28

标签: charts highcharts data-visualization flowchart

我想在我的自定义高图表中绘制一条曲线,如'['用于网络连接。

我得到了一个绘制倒“L”曲线的例子,如下图所示

enter image description here

http://www.highcharts.com/demo/renderer

// Arrow from Batik to SaaS client
ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130, 'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])

.attr({

  'stroke-width': 2,
  stroke: colors[3]

})
.add();

我可以获得有关参数的任何帮助。我尝试了各种组合,但准确度很差。

1 个答案:

答案 0 :(得分:3)

您可以在Highcharts API中找到有关制作曲线的信息: http://api.highcharts.com/highcharts#Renderer.path

您可以在此处找到有关制作弯边的所有信息: https://www.w3.org/TR/SVG/paths.html#PathDataCurveCommands

在这里,您可以找到可以帮助您制作图表的代码

      $('#container').highcharts({}, function(chart) {
    var ren = chart.renderer;
    ren.path(['M', 235, 125, 'L', 200, 125, 'L', 200, 220, 'L', 235, 220, ])
      .attr({
        'stroke-width': 2,
        stroke: 'blue'

      })
      .add();
  });

在这里,您可以找到此路径的外观示例: http://jsfiddle.net/w0cujkbm/4/

最好的问候。