添加額外的條列軸

Question

我有一個圖表，我application.I都能夠自定義圖表像下面的圖像

這裏的一切工作正常，但如何繪製在x軸是小節線，無論是這是可能的，或者not.I我加入一個小提琴手誰能幫我畫的是巴線與每一個酒吧

代碼

Highcharts.chart('container', { 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Stacked column chart' 
    }, 
    xAxis: { 
     categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Total fruit consumption' 
     }, 
     stackLabels: { 
      enabled: true, 
      style: { 
       fontWeight: 'bold', 
       color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
      } 
     } 
    }, 
    legend: { 
     align: 'right', 
     x: -30, 
     verticalAlign: 'top', 
     y: 25, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
     borderColor: '#CCC', 
     borderWidth: 1, 
     shadow: false 
    }, 
    tooltip: { 
     headerFormat: '<b>{point.x}</b><br/>', 
     pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' 
    }, 
    plotOptions: { 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: true, 
       color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
      } 
     } 
    }, 
    series: [{ 
     name: 'John', 
     data: [5, 3, 4, 7, 2] 
    }, { 
     name: 'Jane', 
     data: [2, 2, 3, 2, 1] 
    }, { 
     name: 'Joe', 
     data: [1, 1, 1, 1, 1] 
    }] 
}); 

Code

Answer 1

你可以用renderer來畫這些線。到接入點的像高度，寬度，X圖形屬性，y使用chart.series[seriesIndex].data[pointIndex].shapeArgs

function getLinePaths(chart) { 
    var series = chart.series, 
    extensionFactor = 0.3, 
    linePaths = []; 

    series[series.length - 1].data.forEach(function(point) { 
    var shapeArgs = point.shapeArgs, 
     left = chart.plotLeft + shapeArgs.x, 
     right = left + shapeArgs.width, 
     y = chart.plotTop + shapeArgs.y + shapeArgs.height, 
     length = right - left; 

    linePaths.push([ 
     'M', left - (length * extensionFactor), y, 
     'L', right + (length * extensionFactor), y 
    ]); 
    }); 

    return linePaths; 
} 

function renderLines() { 
    var chart = this, 
    customLines = this.customLines = [], 
    linePaths = getLinePaths(chart); 

    linePaths.forEach(function(linePath) { 
    customLines.push(
     chart.renderer.path(linePath) 
     .attr({ 
     'stroke-width': 3, 
     stroke: 'red', 
     zIndex: 6 
     }) 
     .add() 
    ); 
    }); 
} 

function animateLines() { 
    var chart = this, 
    customLines = chart.customLines, 
    linePaths = getLinePaths(chart); 

    customLines.forEach(function (line, i) { 
    line.animate({ 
     d: linePaths[i] 
    }); 
    }); 
} 

例如：http://jsfiddle.net/tcr8rrrh/1/

如果你不想使用的渲染器，再添加這些行系列。

series: [ 
{ 
    type: 'line', 
    data: [[-0.3, 0], [0.3, 0]], 
    color: 'red' 
}], 

plotOptions: { 
    line: { 
    marker: { 
     enabled: false 
    }, 
    enableMouseTracking: false, 
    showInLegend: false 
    } 
} 

例如：http://jsfiddle.net/tcr8rrrh/2/