highcharts柱形图，带线，需要从栏开始的线开始 [英] highcharts column chart with line, need line start at bar start

问题描述

这是演示场，

所需的折线图从第一列左边框开始到最后一列右边框，如下图所示

need line chart start from first column left border to last column right border like image below

在演示场中，它开始于柱的中心.

in demo fiddel it is start for center of bars.

这是我的系列代码，或者您可以在fiddel中看到:

here is my code of series or you can see in fiddel :

series: [{
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
        valueSuffix: ' mm'
    }

}, {
    name: 'Temperature',
    type: 'line',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
        valueSuffix: '°C'
    },
    step: 'center',
    rangeSelector: {
    selected: 0
        }
}]

推荐答案

我分两步实现了预期的结果:

I achieved the desired result in two steps:

1. 我在第一个点之前和最后一个点之后添加了一个点.然后，设置xAxis的min和max属性.这导致其他点不可见，但它们的线却是可见的.

2. 创建剪切路径并将其应用于线系列. clipRect的尺寸基于第一列和最后一列的x位置:

1. I added a point before the first point and after the last point. Then I set min and max properties of xAxis. This causes that additional points are not visible but lines to them are.

2. Create and apply a clip path to line series. The dimensions of clipRect are based on the x positions of the first and the last column:

var columnSeries = this.series[0],
  lineSeries = this.series[1],
  firstPoint = columnSeries.points[0],
  lastPoint = columnSeries.points[columnSeries.points.length - 1],
  clipRect = this.renderer.clipRect(firstPoint.shapeArgs.x, 0, lastPoint.plotX, 9999);

lineSeries.graph.clip(clipRect);

实时演示: http://jsfiddle.net/BlackLabel/x2r34huc/

API参考: https://api .highcharts.com/class-reference/Highcharts.SVGElement#clip

这篇关于highcharts柱形图，带线，需要从栏开始的线开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！