javascript - 用于运行查询可视化的时间序列水平条形图

Question

我需要构建一个时间序列水平条形图，如下所示。每个条代表集群上运行的一个查询。条形的长度代表持续时间。每个查询都有开始时间和结束时间。多个查询可以具有相同的开始时间或结束时间或两者都有。查询可能并行运行。

我正在使用 highcharts/highstocks 图表库，想知道我需要使用什么样的 Highchart 配置来完成它。请指教。

Answer 1

我会使用columnrange系列。这里有一个例子:https://jsfiddle.net/BlackLabel/6bu8gtaw目前它是硬编码的，您可以对其进行编辑并根据您的要求进行调整。

您可以在这里找到所有使用过的 API 属性:https://api.highcharts.com/highcharts

Highcharts.chart('container', {

  chart: {
    type: 'columnrange',
    inverted: true,
    height: 200,
    borderWidth: 1,
    borderColor: '#d3d3d3'
  },

  legend: {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical'
  },

  plotOptions: {
    series: {
      groupPadding: 0,
      pointPadding: 0.1,
      grouping: false,
      pointWidth: 6,
      borderWidth: 0
    }
  },

  title: {
    text: null
  },

  xAxis: {
    visible: false,
    reversed: false,
    min: -3,
    max: 7
  },

  yAxis: {
    opposite: true,
    min: -3,
    max: 18
  },

  series: [{
    data: [
      [0, 10, 13]
    ]
  }, {
    data: [
      [1, 2, 5]
    ]
  }, {
    data: [
      [1, 6, 9]
    ]
  }, {
    data: [
      [1, 12, 16]
    ]
  }, {
    data: [
      [2, 3, 7]
    ]
  }, {
    data: [
      [2, 7, 12]
    ]
  }, {
    data: [
      [3, 0, 4]
    ]
  }, {
    data: [
      [3, 5, 10]
    ]
  }, {
    data: [
      [3, 10, 14]
    ]
  }, {
    data: [
      [3, 16, 18]
    ]
  }, {
    data: [
      [4, 0, 5]
    ]
  }, {
    data: [
      [4, 6, 11]
    ]
  }, {
    data: [
      [4, 11, 15]
    ]
  }, {
    data: [
      [4, 16, 18]
    ]
  }]

});