2

我正在使用 React-JSX-Highcharts 处理柱状图之类的直方图。我有 6 个类别，5 个类别有 10 个数据点，第 6 个和最后一个类别有 30 个数据点。我正在尝试使刻度线从每个类别开始，但类别标签位于刻度线之间。我可以通过设置 x-axis labels 来实现这一点x: 150，但是，我了解到这不是响应式的。

这是我想要实现的目标： 在此处输入图像描述

很想知道我是否（A）采用了错误的方法，（B）使用了错误的系列类型（我尝试了直方图，但我的垃圾箱是按类别分类的，所以结果是堆积的列），或者（C）如果我是关闭，如果有人能找到解决方案来响应地居中标签。

Highcharts.chart('container', {
    chart: {
    type: 'column'
},
xAxis: {
    categories: [
  "VERY LOW",
  "LOW",
  "MEDIUM",
  "HIGH",
  "VERY HIGH",
  "EXTREMELY HIGH"
],
tickInterval: 10,
startOnTick: true,
tickMarkPlacement: 'between',
type: 'category',
endOnTick: false,
showTempty: true,
},
series: [{
    data: [
  {x: 0, name: 'VERY LOW', y: 0.2},
  {x: 1, name: 'VERY LOW', y: 0.2},
  {x: 2, name: 'VERY LOW', y: 0.8},
  {x: 3, name: 'VERY LOW', y: 1},
  {x: 4, name: 'VERY LOW', y: 1.1},
  {x: 5, name: 'VERY LOW', y: 1.1},
  {x: 6, name: 'VERY LOW', y: 1.3},
  {x: 7, name: 'VERY LOW', y: 1.5},
  {x: 8, name: 'VERY LOW', y: 2},
  {x: 9, name: 'VERY LOW', y: 1.5},
  {y: 2.1, x: 10, name: 'LOW'},
  {y: 2.1, x: 11, name: 'LOW'},
  {y: 2.4, x: 12, name: 'LOW'},
  {y: 2.5, x: 13, name: 'LOW'},
  {y: 2.1, x: 14, name: 'LOW'},
  {y: 2.6, x: 15, name: 'LOW'},
  {y: 2.0, x: 16, name: 'LOW'},
  {y: 2.7, x: 17, name: 'LOW'},
  {y: 2.9, x: 18, name: 'LOW'},
  {y: 2.5, x: 19, name: 'LOW'},
  {y: 2.5, x: 20, name: 'MEDIUM'},
  {y: 3.3, x: 21, name: 'MEDIUM'},
  {y: 3.0, x: 22, name: 'MEDIUM'},
  {y: 2.9, x: 23, name: 'MEDIUM'},
  {y: 2.8, x: 24, name: 'MEDIUM'},
  {y: 2.6, x: 25, name: 'MEDIUM'},
  {y: 2.5, x: 26, name: 'MEDIUM'},
  {y: 2.1, x: 27, name: 'MEDIUM'},
  {y: 2.2, x: 28, name: 'MEDIUM'},
  {y: 2.2, x: 29, name: 'MEDIUM'},
  {y: 2.2, x: 29, name: 'MEDIUM'},
  {y: 2.0, x: 30, name: 'HIGH' },
  {y: 2.0, x: 31, name: 'HIGH' },
  {y: 1.5, x: 32, name: 'HIGH' },
  {y: 1.3, x: 33, name: 'HIGH' },
  {y: 1.2, x: 34, name: 'HIGH' },
  {y: 1.1, x: 35, name: 'HIGH' },
  {y: 1.1, x: 36, name: 'HIGH' },
  {y: 1.0, x: 37, name: 'HIGH' },
  {y: 0.9, x: 38, name: 'HIGH' },
  {y: 0.7, x: 39, name: 'HIGH' },
  {y: 3.1, x: 40, name: 'VERY HIGH'},
  {y: 0.3, x: 41, name: "VERY HIGH"},
  {y: 0.3, x: 42, name: "VERY HIGH"},
  {y: 0.1, x: 43, name: "VERY HIGH"},
  {y: 0.1, x: 44, name: "VERY HIGH"},
  {y: 0.1, x: 45, name: "VERY HIGH"},
  {y: 0, x: 46, name: "VERY HIGH"},
  {y: 0, x: 47, name: "VERY HIGH"},
  {y: 0, x: 48, name: "VERY HIGH"},
  {y: 0, x: 49, name: "VERY HIGH"},
  {y: 0.3, x: 50, name: "EXTREMELY HIGH"},
  {y: 0.3, x: 51, name: "EXTREMELY HIGH"},
  {y: 0.3, x: 52, name: "EXTREMELY HIGH"},
  {y: 0.1, x: 53, name: "EXTREMELY HIGH"},
  {y: 0.1, x: 54, name: "EXTREMELY HIGH"},
  {y: 0.1, x: 55, name: "EXTREMELY HIGH"},
  {y: 0, x: 56, name: "EXTREMELY HIGH"},
  {y: 0, x: 57, name: "EXTREMELY HIGH"},
  {y: 0, x: 58, name: "EXTREMELY HIGH"},
  {y: 0, x: 59, name: "EXTREMELY HIGH"},
  {y: 0, x: 60, name: "EXTREMELY HIGH"},
  {y: 0, x: 61, name: "EXTREMELY HIGH"},
  {y: 0, x: 62, name: "EXTREMELY HIGH"},
  {y: 0, x: 63, name: "EXTREMELY HIGH"},
  {y: 0, x: 64, name: "EXTREMELY HIGH"},
  {y: 0, x: 65, name: "EXTREMELY HIGH"},
  {y: 0, x: 66, name: "EXTREMELY HIGH"},
  {y: 0, x: 67, name: "EXTREMELY HIGH"},
  {y: 0, x: 68, name: "EXTREMELY HIGH"},
  {y: 0, x: 69, name: "EXTREMELY HIGH"},
]
}]

});

JSFiddle

4

1 回答 1

2

一种以响应方式执行此操作的方法是使用jQuery 调整大小事件来检测图表大小何时发生变化，并在此之后动态更新（如果您使用此解决方案，请不要忘记包含 jQuery）。像这样：

$(window).resize(function() {
  setTimeout(function() {
    chart.update({
      xAxis: {
        labels: {
          x: chart.xAxis[0].len / (chart.xAxis[0].tickPositions.length * 2)
        }
      }
    }, true)
  }, 100)
});

我使用与xAxis.labels.x您相同的值，但我正在动态计算它。

chart.xAxis[0].len- 是以像素为单位的 xAxis 的长度。

(chart.xAxis[0].tickPositions.length * 2)是 xAxis 上的刻度数乘以 2，因为我们希望位于两个刻度之间的中心，而不是刻度标记处。

setTimeout之所以使用，是因为如果我们在用户调整大小时更新页面权限，则位置将不正确。所以我们等待 0.1 秒然后更新。

除此之外，在页面的第一次渲染中，没有调整大小事件。因此，为了调整大小，我使用了这样的highchart 加载事件：

chart: {
  type: 'column',
  events: {
    load: function() {
      this.update({
        xAxis: {
          labels: {
            x: this.xAxis[0].len / (this.xAxis[0].tickPositions.length * 2)
          }
        }
      }, true)
    }
  }
},

相同的更新函数，使用this而不是chart因为图表尚未完全初始化。

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      load: function() {
        //Position the labels for the initial rendering
        this.update({
          xAxis: {
            labels: {
              x: this.xAxis[0].len / (this.xAxis[0].tickPositions.length * 2)
            }
          }
        }, true)
      }
    }
  },
  xAxis: {
    categories: [
      "VERY LOW",
      "LOW",
      "MEDIUM",
      "HIGH",
      "VERY HIGH",
      "EXTREMELY HIGH"
    ],
    labels: {
      rotation: 0,

    },
    tickInterval: 10,
    startOnTick: true,
    tickMarkPlacement: 'between',
    type: 'category',
    endOnTick: false,
    showTempty: true,
  },
  series: [{
       data: [
      {x: 0, name: 'VERY LOW', y: 0.2},
      {x: 1, name: 'VERY LOW', y: 0.2},
      {x: 2, name: 'VERY LOW', y: 0.8},
      {x: 3, name: 'VERY LOW', y: 1},
      {x: 4, name: 'VERY LOW', y: 1.1},
      {x: 5, name: 'VERY LOW', y: 1.1},
      {x: 6, name: 'VERY LOW', y: 1.3},
      {x: 7, name: 'VERY LOW', y: 1.5},
      {x: 8, name: 'VERY LOW', y: 2},
      {x: 9, name: 'VERY LOW', y: 1.5},
      {y: 2.1, x: 10, name: 'LOW'},
      {y: 2.1, x: 11, name: 'LOW'},
      {y: 2.4, x: 12, name: 'LOW'},
      {y: 2.5, x: 13, name: 'LOW'},
      {y: 2.1, x: 14, name: 'LOW'},
      {y: 2.6, x: 15, name: 'LOW'},
      {y: 2.0, x: 16, name: 'LOW'},
      {y: 2.7, x: 17, name: 'LOW'},
      {y: 2.9, x: 18, name: 'LOW'},
      {y: 2.5, x: 19, name: 'LOW'},
      {y: 2.5, x: 20, name: 'MEDIUM'},
      {y: 3.3, x: 21, name: 'MEDIUM'},
      {y: 3.0, x: 22, name: 'MEDIUM'},
      {y: 2.9, x: 23, name: 'MEDIUM'},
      {y: 2.8, x: 24, name: 'MEDIUM'},
      {y: 2.6, x: 25, name: 'MEDIUM'},
      {y: 2.5, x: 26, name: 'MEDIUM'},
      {y: 2.1, x: 27, name: 'MEDIUM'},
      {y: 2.2, x: 28, name: 'MEDIUM'},
      {y: 2.2, x: 29, name: 'MEDIUM'},
      {y: 2.2, x: 29, name: 'MEDIUM'},
      {y: 2.0, x: 30, name: 'HIGH' },
      {y: 2.0, x: 31, name: 'HIGH' },
      {y: 1.5, x: 32, name: 'HIGH' },
      {y: 1.3, x: 33, name: 'HIGH' },
      {y: 1.2, x: 34, name: 'HIGH' },
      {y: 1.1, x: 35, name: 'HIGH' },
      {y: 1.1, x: 36, name: 'HIGH' },
      {y: 1.0, x: 37, name: 'HIGH' },
      {y: 0.9, x: 38, name: 'HIGH' },
      {y: 0.7, x: 39, name: 'HIGH' },
      {y: 3.1, x: 40, name: 'VERY HIGH'},
      {y: 0.3, x: 41, name: "VERY HIGH"},
      {y: 0.3, x: 42, name: "VERY HIGH"},
      {y: 0.1, x: 43, name: "VERY HIGH"},
      {y: 0.1, x: 44, name: "VERY HIGH"},
      {y: 0.1, x: 45, name: "VERY HIGH"},
      {y: 0, x: 46, name: "VERY HIGH"},
      {y: 0, x: 47, name: "VERY HIGH"},
      {y: 0, x: 48, name: "VERY HIGH"},
      {y: 0, x: 49, name: "VERY HIGH"},
      {y: 0.3, x: 50, name: "EXTREMELY HIGH"},
      {y: 0.3, x: 51, name: "EXTREMELY HIGH"},
      {y: 0.3, x: 52, name: "EXTREMELY HIGH"},
      {y: 0.1, x: 53, name: "EXTREMELY HIGH"},
      {y: 0.1, x: 54, name: "EXTREMELY HIGH"},
      {y: 0.1, x: 55, name: "EXTREMELY HIGH"},
      {y: 0, x: 56, name: "EXTREMELY HIGH"},
      {y: 0, x: 57, name: "EXTREMELY HIGH"},
      {y: 0, x: 58, name: "EXTREMELY HIGH"},
      {y: 0, x: 59, name: "EXTREMELY HIGH"},
      {y: 0, x: 60, name: "EXTREMELY HIGH"},
      {y: 0, x: 61, name: "EXTREMELY HIGH"},
      {y: 0, x: 62, name: "EXTREMELY HIGH"},
      {y: 0, x: 63, name: "EXTREMELY HIGH"},
      {y: 0, x: 64, name: "EXTREMELY HIGH"},
      {y: 0, x: 65, name: "EXTREMELY HIGH"},
      {y: 0, x: 66, name: "EXTREMELY HIGH"},
      {y: 0, x: 67, name: "EXTREMELY HIGH"},
      {y: 0, x: 68, name: "EXTREMELY HIGH"},
      {y: 0, x: 69, name: "EXTREMELY HIGH"},
    ]
  }]
});
$(window).resize(function() {
  setTimeout(function() {
    chart.update({
      xAxis: {
        labels: {
          x: chart.xAxis[0].len / (chart.xAxis[0].tickPositions.length * 2)
        }
      }
    }, true)
  }, 100)
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="container" style="height: 400px"></div>

工作 JSFiddle 示例： https ://jsfiddle.net/ewolden/nLcveqp9/29/

于 2018-07-13T08:37:52.563 回答