Блог

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

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

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

ДЕМОНСТРАЦИЯ

 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
  }]
});
  

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

Код:

 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/

Вы можете использовать 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#путь
https://api.highcharts.com/class-reference/Highcharts .SVGElement#Начало
https://api.highcharts.com/highcharts/chart.events.load