如何使用highcharts/d3.js 或任何其他图表库绘制折线图和条形图？

Question

如何使用highcharts/d3.js或任何其他图表库绘制折线加条形图？

所以我真正想要实现的是"Display bar if no data available for particular time interval"（这里的图表说没有时间间隔的数据（17:30-18:30 )).

Answer 1

您可以为此使用 Highcharts/Highstock。您可以将线和列系列放在一个图表中，然后随心所欲地操作它们。

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>

和

var data = [];

for (let i = 0; i < 100; i++) {
  if (i == 10 || i == 11 || i == 12 || i == 13 || i == 14 || i == 15 || i == 16 || i == 17 || i == 18 || i == 27 || i == 28 || i == 29) {
    data.push(null)
  } else {
    data.push([i, Math.floor((Math.random() * 100) + 1)])
  }
}

Highcharts.stockChart('container', {

  xAxis: {
    ordinal: false,
    labels: {
      format: '{value}'
    }
  },

  series: [{
    data: data,
    connectNulls: false,
    dataGrouping: {
      enabled: false
    }
  }, {
    type: 'column',
    pointWidth: 9,
    dataGrouping: {
      enabled: false
    },
    data: [
      [10, 100],
      [11, 100],
      [12, 100],
      [13, 100],
      [14, 100],
      [15, 100],
      [16, 100],
      [17, 100],
      [18, 100],
      [27, 100],
      [28, 100],
      [29, 100]
    ]
  }]

});

查看此在线演示：jsFiddle

Answer 2

您还可以使用具有 plotBands 功能的 Highcharts（应该更有弹性）。在 chart.events.load 上实现了算法，它检查 null 是否在 data 中，并根据您当前的数据动态地将绘图带添加到您的图表中。看看这段代码：

load() {
    var axis = this.xAxis[0]
    var boundaries = []
    var color = '#55f'

    // Check there are nulls in data. If yes, save the boundaries.
    data.forEach((elem, i) => {
        if (elem === null) {
          if (data[i-1]) { boundaries.push(data[i-1][0]) }
          if (data[i+1]) { boundaries.push(data[i+1][0]) }
        }
    })

    // Create plotBands basing on current boundaries.
    boundaries.forEach((range, i) => {
        if (i % 2) {
          axis.addPlotBand({
            from: boundaries[i-1],
            to: range,
            color: color
          })
        }
    })
 }

此外，您可以在图表中添加另一个系列（假系列，数据为空），这将用于切换绘图带的可见性。这是代码：

  {
    // Fake series to add toggling visibility of plotbands functionality.
    name: "Zone of Unavailability",
    data: [],
    events: {
      legendItemClick() {
        var bandsGroup = this.chart.xAxis[0].plotLinesAndBandsGroups['bands-0']
        var bandsVisibility = bandsGroup.attr('opacity')
        bandsGroup.attr({
            opacity: bandsVisibility ? 0 : 1
        })
      }
    }
  }

实例： http://jsfiddle.net/dzj8bwLm/

API参考文献：

https://api.highcharts.com/highcharts/xAxis.plotBands https://api.highcharts.com/highcharts/series.line.events.legendItemClick

如何使用highcharts/d3.js 或任何其他图表库绘制折线图和条形图？

How to draw line plus bar chart using highcharts/d3.js or any other chart library?

highcharts

d3.js

nvd3.js