Highcharts设置图表从0起始及数字千分位空格格式化问题

使用Highcharts开发时需要实现两个需求：

• 图表坐标轴从0值起始（效果参考上方截图）
• 数值按照正则 replace(/\B(?=(\d{3})+(?!\d))/g, " ") 规则添加千分位空格分隔
  多次调整配置未生效，当前使用的chartOptions配置如下：

chartOptions: {
        colors: ['#3DC3FB', '#FF5252', '#D2F449', '#179877'],
        title: {
          text: "",
        },
        credits: {
          enabled: false
        },
        tooltip: {
          formatter: function () {
            if (this.x > 0) {
              return this.x;
            } else return false;
          },
        },
        plotOptions: {
          series: {
            enableMouseTracking: false,
            states: {
              hover: {
                enabled: false
              },
              normal: {
                animation: false
              },
              select: {
                enabled: false
              }
            }
          },
        },
        xAxis: {
          gridLineWidth: 1,
          tickmarkPlacement: 'on',
          lineColor: "#A4A4A4",
          min: 0,
          categories: [null, "10 лет"],
          top: 10,
          right: -100,
          title: {
            style: {
              color: "#A4A4A4"
            }
          },
        },
        yAxis: {
          gridLineWidth: 0,
          tickColor: 'undefined',
          tickLength: 5,
          tickWidth: 1,
          tickPosition: 'outside',
          lineWidth: 1,
          lineColor: '#A4A4A4',
          min: 3,
          title: {
            text: "Доход от инвестиций",
            margin: 10,
            align: "low",
            style: {
              color: "#A4A4A4"
            },
            y: -50,
          },
          labels: {
            enabled: false,
          },
        },
        legend: {enabled: false},
        marker: {
          enabled: false,
          symbol: 'circle',
          radius: 12,
          states: {
            hover: {
              fillColor: 'white',
              lineColor: 'green',
              lineWidth: 0
            }
          }
        },
        series: [
          {
            type: 'line',
            name: "ВДело",
            data: [0, 1100],
            dataLabels: {
              x: -100,
              y: 5,
              enabled: true,
              // useHTML: true,
              format: `{point.y}/мес`,
              formatter: function () {
                return Highcharts.numberFormat(this.y,2);
              },
              color: "#3DC3FB",
              style:{
                fontSize: 20,
                lineHeight: 18,
                fontWeight: 500,
                fontFamily: 'Gilroy',
                fontStyle: 'normal',
              }
            },
            animation: {
              defer: 1
            },
            marker: {
              symbol: 'circle',
              radius: 4,
              states: {
                hover: {
                  fillColor: '#3DC3FB',
                  lineColor: 'green',
                  lineWidth: 0
                }
              }
            },

          },
          {
            type: 'line',
            name: "Акции",
            data: [0, 550],
            animation: {
              defer: 1
            },
            marker: {
              symbol: 'circle',
              radius: 4,
              states: {
                hover: {
                  fillColor: '#FF5252',
                  lineColor: 'green',
                  lineWidth: 0
                }
              }
            },
          },
          {
            type: 'line',
            name: "Облигации",
            data: [0, 366],
            animation: {
              defer: 1
            },
            marker: {
              symbol: 'circle',
              radius: 4,
              states: {
                hover: {
                  fillColor: '#D2F449',
                  lineColor: 'green',
                  lineWidth: 0
                }
              }
            },
          },
          {
            type: 'line',
            name: "Депозит",
            data: [0, 275],
            animation: {
              defer: 1
            },
            marker: {
              symbol: 'circle',
              radius: 4,
              states: {
                hover: {
                  fillColor: '#179877',
                  lineColor: 'green',
                  lineWidth: 0
                }
              }
            },
          },
        ],
      },

1. 坐标轴从0值起始 #

你当前yAxis配置写了min: 3，这是坐标轴从3开始的直接原因，把这个值改成0即可。如果后续遇到数值轴被Highcharts自动截断、不从0开始的情况，可额外加startOnTick: true配置，强制轴从0刻度起始。
修改后的yAxis核心配置：

yAxis: {
  gridLineWidth: 0,
  tickColor: 'undefined',
  tickLength: 5,
  tickWidth: 1,
  tickPosition: 'outside',
  lineWidth: 1,
  lineColor: '#A4A4A4',
  min: 0, // 原配置为3，修改为0
  startOnTick: true, // 可选，强制从0刻度开始
  title: {
    text: "Доход от инвестиций",
    margin: 10,
    align: "low",
    style: {
      color: "#A4A4A4"
    },
    y: -50,
  },
  labels: {
    enabled: false,
  },
}

xAxis你已经配置了min:0，本身满足从0起始的要求，无需调整。

2. 千分位空格分隔 #

当前配置存在两个问题：

• 第一个系列的dataLabels同时配置了format和formatter，formatter优先级更高，写的format规则不会生效
• 调用的Highcharts.numberFormat默认千分位分隔符是逗号，不符合空格分隔的要求

先封装一个通用的数值格式化函数，所有需要格式化数值的位置都可以复用：

// 千分位加空格格式化
function formatNumberWithSpace(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}

然后修改第一个系列的dataLabels配置，删掉无效的format字段，在formatter里调用格式化函数，拼接需要的/мес后缀：

dataLabels: {
  x: -100,
  y: 5,
  enabled: true,
  // 删除原format配置，避免冲突
  formatter: function () {
    return `${formatNumberWithSpace(this.y)}/мес`;
  },
  color: "#3DC3FB",
  style:{
    fontSize: 20,
    lineHeight: 18,
    fontWeight: 500,
    fontFamily: 'Gilroy',
    fontStyle: 'normal',
  }
}

其余三个系列如果后续需要开启数据标签，直接复用这套formatter逻辑即可。如果需要给tooltip、坐标轴标签添加千分位空格格式，同样调用这个格式化函数处理对应数值即可。

内容的提问来源于stack exchange，提问作者Алексей Огневой