Milestone Trendanalysis с высокими диаграммами

Question

Можно ли сделать следующий график с библиотекой Highcharts?

Это простой линейный график, но с перевернутой треугольной сеткой.Есть ли какой-либо предопределенный тип или способ настроить форму сетки?Любые указатели, которые направят меня в правильном направлении, помогут.Спасибо!

Answer 1

Еще один способ создания диаграммы такого типа:

Демо

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 2

Вы можете использовать Highcharts SVG Renderer для рендеринга треугольника, который покрывает половину графика. Проверьте это демо: 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

Answer 3

Нет такого типа серии. Тем не менее, вы можете сделать это с помощью искусственных многоугольников, которые будут скрывать половину графика. Проверьте демо и код, указанный ниже

Код:

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/