时间戳

首页 > 解决方案 > 如何使用 highcharts/d3.js 或任何其他图表库绘制线加条形图？

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

问题描述

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

所以我到底想要实现的是“如果特定时间间隔没有可用数据，则显示栏”（这里的图表显示时间间隔（17:30-18:30）没有可用数据）。

标签： d3.jshighchartsnvd3.js

解决方案

您也可以使用具有plotBands功能的 Highcharts（应该更有弹性）。实现了一种算法，chart.events.load用于检查nulls 是否在 中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

推荐阅读