使用 Highcharts 进行里程碑趋势分析

Question

下面的图表可以用Highcharts库制作吗？

这是一个简单的折线图，但带有倒三角形网格。是否有任何预定义类型或自定义网格形状的方法？任何能指导我正确方向的指示都会有所帮助。谢谢！

Answer 1

没有这样的系列类型。但是，您可以使用隐藏一半图表的假多边形系列来制作它。检查下面发布的演示和代码。

代码：

Highcharts.chart('container', {
  chart: {
    height: 500,
    width: 500,
    events: {
      load: function() {
        var chart = this,
          polygon = chart.series[2].group,
          x = polygon.translateX,
          y = polygon.translateY;

        polygon.translate(x + 3, y + 3);
      }
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  xAxis: {
    opposite: true,
    gridLineWidth: 1,
    gridLineColor: '#ddd',
    tickInterval: 1,
    maxPadding: 0,
    lineWidth: 0,
    max: 10,
    min: 0
  },
  yAxis: {
    maxPadding: 0,
    tickInterval: 1,
    gridLineColor: '#ddd',
    max: 10,
    min: 0
  },
  series: [{
    name: 'Installation',
    data: [8, 6, 7, 8, 7, 6]
  }, {
    name: 'Manufacturing',
    data: [3, 2, 4, 4]
  }, {
    type: 'polygon',
    animation: false,
    showInLegend: false,
    enableMouseTracking: false,
    color: '#fff',
    lineWidth: 10,
    data: [
      [0, 0],
      [10, 0],
      [10, 10]
    ]
  }, {
    type: 'line',
    showInLegend: false,
    enableMouseTracking: false,
    data: [
      [0, 0],
      [10, 10]
    ],
    color: '#ddd',
    lineWidth: 1,
    marker: {
      enabled: false
    }
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>

演示：

https://jsfiddle.net/BlackLabel/xL9taoym/1/

Answer 2

创建此类图表的另一种方法：

Demo

Highcharts.chart('container', {

  chart: {
    width: 500,
  },
  xAxis: {
    opposite: true,
    title: {
      text: 'Report Date'
    },
    gridLineWidth: 1,
    type: 'datetime',
    categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
    tickmarkPlacement: 'on',
    labels: {
      rotation: -90,
      y: -18
    },
    offset: -13,
    lineWidth: 0,
    max: 8.6,
  },
  legend: {
    enabled: false
  },
  yAxis: {
    title: {
      text: 'Milestones'
    },
    categories: ['01/01/2012', '02/01/2012', '03/01/2012', '04/01/2012', '05/01/2012', '06/01/2012', '07/01/2012', '08/01/2012', '09/01/2012', '10/01/2012'],
    tickmarkPlacement: 'on',
    gridLineWidth: 1,
    tickPosition: 'inside',
    min: 0,
    minPadding: 0,
    startOnTick: false
  },

  series: [{
    data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    marker: {
      enabled: false
    },
    color: 'grey',
    enableMouseTracking: false,
    animation: false
  }, {
    data: [6, 6, 6, 7, 8, 7, 7, 8, 8.5, 9]
  }, {
    data: [5, 5, 5, 6, 6.5, 6, 6.5, 7.5, 8]
  }, {
    data: [4, 4, 4, 5, 5.5, 5.5, 6]
  }, {
    data: [2, 2.5, 2.5, 3.5, 4]
  }, {
    data: [1, 1.5, 2]
  }, {
    type: 'arearange',
    data: [[0, 0, -5], [9.2, 9, -5]],
    color: 'white',
    fillOpacity: 1,
    marker: {
      enabled: false
    },
    zIndex: -1,
    enableMouseTracking: false,
    animation: false
  }]
});

Answer 3

您可以使用 Highcharts SVG 渲染器渲染覆盖图表一半的三角形。检查这个演示：https://jsfiddle.net/BlackLabel/2boma9zs

events: {
  load: function() {
    var chart = this,
      left = chart.plotLeft,
      top = chart.plotTop,
      width = chart.plotSizeX,
      height = chart.plotSizeY;

    chart.renderer.path([
        'M', left + 1, top + height,
        'L', left + width + 1, top,
        left + width + 3, top,
        left + width + 3, top + height + 3,
        left + 1, top + height + 3,
        left + 1, top + height
      ])
      .attr({
        fill: '#fff'
      })
      .add()
      .toFront();
  }
}

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path https://api.highcharts.com/class-reference/Highcharts.SVGElement#toFront https://api.highcharts.com/highcharts/chart.events.load

使用 Highcharts 进行里程碑趋势分析

Milestone Trendanalysis with Highcharts

highcharts

angular2-highcharts