Question

我的应用程序中有一个图表。我必须自定义该图表，如下图所示

这里一切正常但是如何在x轴上绘制条形线，无论是否有可能。我正在添加一个小提琴手，任何人都可以帮我画每个小节的条形线

码

 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绘制这些线条。要访问点的图形属性，如height，width，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/

在highcharts x轴中添加其他条形线

1 个答案: