没有垂直“过渡”的Highcharts / Highstock阶梯线行呢？ [英] Highcharts / Highstock step line without vertical "transition" lines?

问题描述

是否可以省略方波行的垂直线？我认为你可以称之为关卡，这里是一个插图：

解决方案

实现这种效果的最简单方法是使用散点图符号：

  //定义自定义符号
 Highcharts.SVGRenderer.prototype.symbols.line = function（ x，y，'L'，x-w * 2，y，'M'，x，y''L'，x + w * 2，y，'z']; 
}; 
 if（Highcharts.VMLRenderer）{
 Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross; 
 
 $ b $（'＃container'）。highcharts（{
图表：{
类型：'scatter'
}，
标题：{
 text：'看线！'
}，
系列：[{
 name：'Line Symbol'，
 data：[54.4， 29.9，{y：129.2，radius：8}，144.0，176.0，135.6]，
标记：{
符号：'line'，
 lineColor：null，
 lineWidth： 2 
} 
}] 
}）; 
  

请注意，您可以通过增加半径来调整单个点的长度。

小提琴 here a>。

产生：

Is it possible to omit the vertical lines from the "square wave" line? I think you could call that a level line, here's an illustration:

解决方案

The easiest way to achieve this look is to use a scatter chart with a custom "line" symbol:

// define a custom line symbol
Highcharts.SVGRenderer.prototype.symbols.line = function (x, y, w, h) {
    return ['M', x, y, 'L', x - w * 2, y, 'M', x, y, 'L', x + w * 2, y, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}

$('#container').highcharts({
    chart: {
        type: 'scatter'    
    },
    title: {
        text: 'Look At Lines!!'
    },     
    series: [{
        name: 'Line Symbol',
        data: [54.4, 29.9, {y: 129.2, radius: 8}, 144.0, 176.0, 135.6],
        marker: {
            symbol: 'line',
            lineColor: null, 
            lineWidth: 2
        }
    }]
});

Note that you can adjust the length of an individual point by upping the radius.

Fiddle here.

Produces:

这篇关于没有垂直“过渡”的Highcharts / Highstock阶梯线行呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！