时间戳

首页 > 解决方案 > 空数据的 Highchart Persist bar 宽度

highcharts - 空数据的 Highchart Persist bar 宽度

问题描述

我有一个包含两个系列的简单 HighStock 图表，如下图所示：

在此处输入图像描述

因此，在功能方面，HighChart 会在添加新系列后立即减小条形的宽度。

但是当特定点只有一个系列的数据时，我不想减小条的宽度。（此处日期为 5 月 17 日）

这是我创建的小提琴。尝试隐藏其中一个系列并查看栏的宽度。当两个系列都可见时，应为“17. May”上的栏应用相同的宽度，因为该日期只有一个系列的数据。如下所示：

在此处输入图像描述

我使用了以下代码：

Highcharts.stockChart('container', {
    chart: {
        alignTicks: false
    },
            legend: {
        enabled: true
    },
    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'AAPL Stock Volume'
    },

  "series":[
    {
      "name":"Key Rate 319",
      "type":"column",
      "data":[{x: 1147651200000, y: 1}, {x: 1147737600000, y: 7}, {x: 1147824000000, y: 5}, {x: 1147910400000, y: 4}],
      "marker":{"enabled":false},
      "shadow":false,
      "color":"blue"
    },
    {
      "name":"Key Rate 321",
      "type":"column",
      "data":[{x: 1147651200000, y: 4}, {x: 1147737600000, y: 2}, {x: 1147824000000, y: null}, {x: 1147910400000, y: 1}],
      "color":"green"
    }]
});

我怎样才能做到这一点？

标签： highcharts

解决方案

Series 有两个属性用于控制点的范围和位置：pointRange& pointPlacement。它们适用于所有系列的点，不幸的是不能应用于单个列。

解决方法

禁用grouping并重置pointPadding& groupPadding：

  plotOptions: {
    series: {
      grouping: false,
      pointPadding: 0,
      groupPadding: 0
    }
  },

为每个点创建一个单独的系列并将适当的pointRange&pointPadding应用于它们。然后使用linkedTo属性链接它们以模仿原始系列结构：

  series: [{
    name: 'First series',
    color: '#bada55',
    data: [
      [0, 2]
    ],
    pointRange: 0.4,
    pointPlacement: -0.5
  }, {
    data: [
      [1, 7]
    ],
    linkedTo: ':previous',
    color: '#bada55',
    pointRange: 0.4,
    pointPlacement: -0.5
  }, {
    data: [
      [2, 5]
    ],
    linkedTo: ':previous',
    color: '#bada55',
    //pointRange: 1, // by default
    //pointPlacement: 0 // by default
  }, {
    data: [
      [3, 4]
    ],
    linkedTo: ':previous',
    color: '#bada55',
    pointRange: 0.4,
    pointPlacement: -0.5
  }, {
    name: 'Second series',
    data: [
      [0, 1]
    ],
    color: '#c0ffee',
    pointRange: 0.4,
    pointPlacement: 0.5
  }, {
    data: [
      [1, 2]
    ],
    linkedTo: ':previous',
    color: '#c0ffee',
    pointRange: 0.4,
    pointPlacement: 0.5
  }, {
    data: [
      [3, 2]
    ],
    linkedTo: ':previous',
    color: '#c0ffee',
    pointRange: 0.4,
    pointPlacement: 0.5
  }]

现场演示：http: //jsfiddle.net/BlackLabel/q7j4m8eb/

这种方法的缺点是您必须为每个点（系列）明确定义颜色，并且数据结构看起来有点复杂。

上面提到的所有选项都可以在 API 中找到： https ://api.highcharts.com/highcharts/

推荐阅读