Question

我是High Charts的新手绘制图表。我的要求是通过指定结束坐标在已绘制的图表顶部绘制一条小垂直线。我可以使用JqPlot插件轻松绘制一个，下面给出了图像。

我在JqPlot中使用的选项是

canvasOverlay: {
                    show: true,
                    objects: [
                        {line: {
                                name: 'stack-overflow',                                    
                                lineWidth: 6,
                                start: [8, 0.5],
                                stop:[8, 0.7],
                                color: 'rgb(100, 55, 124)',
                                shadow: false
                            }}
                    ]
                }

在一些研究中我发现我可以在高级图表中使用 plotLines

Stackoverflow Post

我尝试过这个选项，但它绘制了一条全长红色垂直线，我没有看到任何限制线长度的选项。

我使用的代码如下所示

 xAxis: {
                    min: 0,
                    max: 35,
                    tickInterval: 5,
                    title: {text: "Time"},
                    plotLines: [{
                            color: 'red',
                            width: 5,
                            value: 5.5
                        }]

                }

更新：

JSFiddle链接在下面给出

JSFIddle

我错过了什么或者我是否需要尝试其他选择

Answer 1

您可以使用Highcharts renderer选项

function (chart) {
    var lineStartXposition2 = lineStartXposition + chart.plotLeft + 10,
        lineStartYposition2 = lineStartYposition + chart.plotTop + 10,
        lineEndXposition2 = lineEndXposition + chart.plotLeft + 10,
        lineEndYposition2 = lineEndYposition + chart.plotTop + 10;

    chart.renderer.path(['M', positionX, positionY, 'L', positionX, positionEnd])
    .attr({
        'stroke-width': 2,
        stroke: 'red'
    })
    .add();
});

更新3：使用点坐标和变量的新小提琴 Fiddle

Answer 2

我希望以下链接可以帮助您

    chart.addSeries({ 
    name: 'Line Marker Values',
    type:'scatter',
    marker: {
        symbol:'hline',
        lineWidth:2,
        lineColor:'rgba(253,0,154,0.9)',
        radius:12
    },
    data: [32,35,37,28,42,35,27]
});

click here

Answer 3

您可以为此使用适当配置的分散系列。

var chart = Highcharts.chart('container', {
  series: [{
    data: [1, 3, 4, 5, 1]
  }, {
    tooltip: {
        pointFormat: null // don't dispaly tooltip
    },
    states: {
        hover: {
        enabled: false
      }
    },
    type: 'scatter', // points don't need to be sorted
    lineWidth: 3,
    marker: {
        enabled: false
    },
    showInLegend: false,
    data: [
      [2, 3], [2, 5]
    ]
  }]
});

现场演示： http://jsfiddle.net/kkulig/gab2ow7f/

使用高图表通过指定结束坐标在图表顶部绘制一条小垂直线

3 个答案: