用于持续状态数据的高亮图表，如timeserise

Question

我需要支持来创建图形，如图像

在时间轴图的帮助下，我创建了这个created jsfiddle

我不知道如何实现我的输出。这样它就与图像图形匹配。就像我如何创造计数＆！ ，设置图表的图标状态。

在小提琴链接中，您可以看到两个数据块之间的间隙应该是平滑的条形线。

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之一。它应该更好地满足您的需求。

要添加自定义元素，例如图标或数字，可以使用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