Верхний график для продолжения данных о состоянии в строке, как timeserise

Question

Мне нужна поддержка для создания графика, как на изображении

с помощью графика времени я создал это создал jsfiddle

Я не знаю, как мне добиться результата. Так что это соответствует графу изображения. Например, как я могу создать count & ! , значок настройки статуса для графика.

В соединении Fiddle вы можете видеть промежуток между двумя блоками данных, это должна быть гладкая линейная линия.

Highcharts.chart('container', {
    chart: {
        zoomType: 'x',
        type: 'timeline'
    },
    xAxis: {
       // type: 'datetime',
        visible: false
    },
    yAxis: {
        gridLineWidth: 10,
        title: null,
        labels: {
            enabled: false
        }
    },
    legend: {
        enabled: false
    },
    title: {
        text: 'Timeline of Space Exploration'
    },
    tooltip: {
    		enabled:false,
        style: {
            width: 20
        }
    },
    series: [{
        dataLabels: {
            allowOverlap: false,
            format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
                '{point.x:%d %b %Y}</span><br/>{point.label}'
        },
        marker: {
            symbol: 'circle'
        },
        data: [{
            x: Date.UTC(1951, 5, 22),
            name: 'First dogs in space',
            label: 'First dogs in space',
            description: "Dezik and Tsygan were the first dogs to make a sub-orbital flight on 22 July 1951. Both dogs were recovered unharmed after travelling to a maximum altitude of 110 km."
        }, {
            x: Date.UTC(1957, 9, 4),
            name: 'First artificial satellite',
            label: 'First artificial satellite',
            description: "Sputnik 1 was the first artificial Earth satellite. The Soviet Union launched it into an elliptical low Earth orbit on 4 October 1957, orbiting for three weeks before its batteries died, then silently for two more months before falling back into the atmosphere."
        }, {
            x: Date.UTC(1959, 0, 4),
            name: 'First artificial satellite to reach the Moon'
        }]
    }]
});

#container {
    min-width: 400px;
    max-width: 600px;
    margin: 0 auto;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>

<div id="container"></div>

Answer 1

Вместо серии timeline вы можете использовать x-range one. Это должно быть лучше для ваших нужд.

Для добавления пользовательских элементов, таких как значки или цифры, можно использовать Highcharts.SVGRenderer. Проверьте ссылки на API и демонстрационный пример с примером, размещенным ниже.

Код:

Highcharts.chart('container', {
  chart: {
    type: 'xrange',
    height: 300,
    events: {
      render: function() {
        var chart = this,
          point = chart.series[0].points[0],
          imgSize = 22,
          x = point.plotX + chart.plotLeft + point.shapeArgs.width / 2 - imgSize / 2,
          y = point.plotY + chart.plotTop - point.shapeArgs.height - imgSize / 2,
          offsetTop = -5,
          svgElem;
        
        if (chart.customElemenst && chart.customElemenst.length) {
        	chart.customElemenst.forEach(function(elem) {
          	elem.destroy();
          });
        }
        
        chart.customElemenst = [];

        svgElem = chart.renderer.image(
          'https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Info_icon-72a7cf.svg/256px-Info_icon-72a7cf.svg.png', 
          x,
          y + offsetTop,
          imgSize,
          imgSize
        ).add();
        
        chart.customElemenst.push(svgElem);
      }
    }
  },
  title: {
    text: 'Highcharts X-range'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true
  },
  plotOptions: {
    series: {
      borderRadius: 0
    }
  },
  series: [{
    name: 'Project 1',
    borderColor: 'gray',
    pointWidth: 20,
    data: [{
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 2),
      y: 0,
      partialFill: 0.25
    }, {
      x: Date.UTC(2014, 11, 2),
      x2: Date.UTC(2014, 11, 5),
      y: 1,
      color: 'green'
    }, {
      x: Date.UTC(2014, 11, 9),
      x2: Date.UTC(2014, 11, 19),
      y: 1,
      color: 'green'
    }, {
      x: Date.UTC(2014, 10, 21),
      x2: Date.UTC(2014, 11, 2),
      y: 1,
      color: 'red'
    }, {
      x: Date.UTC(2014, 11, 5),
      x2: Date.UTC(2014, 11, 9),
      y: 1,
      color: 'red'
    }],
    dataLabels: {
      enabled: true
    }
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

Демо-версия:

• https://jsfiddle.net/BlackLabel/8f9o6dt0/

Справочник по API:

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image

• https://api.highcharts.com/class-reference/Highcharts.SVGElement#add