如何使Highcharts分笔成交点均匀分布而不受分笔成交点值的影响

ss2ws0br  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(170)

我用Highcharts React创建了一个带有一些图表选项的条形图
https://codesandbox.io/s/highchart-bar-uneven-ticks-c6mi5p
刻度分布不均匀。是否有任何方法可以使刻度均匀分布而不考虑其值?

我希望在Highcharts找到一个选项

n53p2ov0

n53p2ov01#

您可以将分笔成交点位置转换为固定间隔,根据比例计算数据并显示模拟标签/工具提示。
例如:

const tickPositions = [40, 60, 80, 100, 160, 220, 280, 340, 400, 460, 520];
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const processedTickPositions = tickPositions.map((tick, index) => index);

const getProcessedData = (data) => {
  const foundTick = tickPositions.find(tick => tick > data);
  const prevTickIndex = tickPositions.indexOf(foundTick) - 1;
  const prevTick = tickPositions[prevTickIndex];

  if (!foundTick) {
    return processedTickPositions[0];
  }

  return prevTickIndex + (data - prevTick) / (foundTick - prevTick);
}

const chartOptions = {
  series: [{
    ...,
    data: [{
      y: getProcessedData(180),
      custom: {
        value: 180,
        unit: "kg",
        label: "label"
      }
    }]
  }],
  yAxis: [{
    ...,
    labels: {
      formatter: function() {
        return tickPositions[this.pos]
      }
    }
  }],
  ...
};

Highcharts.chart('container', chartOptions);

现场演示:http://jsfiddle.net/BlackLabel/yj7akt29/
API引用:https://api.highcharts.com/highstock/yAxis.labels.formatter

相关问题