javascript - 如何将文本标签添加到 Highcharts 中的数字 x 轴

Question

我使用散点图类型和样条曲线来为一系列数据创建曲线。另一个系列包含一个值，该值始终落在曲线上的某个点上。目前我的 x 轴编号为 0 到 4，这是应该的。然而，x 轴上的数字(例如 0-1)代表业务区域，我想显示 x 轴上的区域名称而不是数字。

我附上了一张图片来说明我的目标。 无论如何，在 Highcharts 中可以实现这一点吗？

$(function() {
  var final_score = 3.2

  $('#container').highcharts({
    chart: {
      type: 'scatter'
    },
    title: {
      text: 'Industry Index',
      margin: 30,
      style: {
        fontSize: '14px'
      }
    },
    plotOptions: {
      scatter: {
        lineWidth: 2
      },
      line: {
        marker: {
          enabled: false
        }
      }
    },
    /*yAxis: {
    	tickInterval: 1,
    },*/
    xAxis: {
      min: 0,
      max: 4,
      type: 'number',
      tickInterval: 1
    },
    series: [{
      name: 'Industry benchmark',
      data: [
        [0.5, 3],
        [1.5, 6.9],
        [2.5, 9.5],
        [3.5, 16.5]
      ],
      type: 'spline'
      // fillColor: 'rgba(252,96,18,0.8)'
    }, {
      name: 'Your Organisation',
      marker: {
        enabled: true,
        radius: 6
      },
      data: [
        [final_score, 14.05]
      ],
      type: 'spline'
    }]
  });
});

#container {
  position: relative;
  padding-top: 1em;
  background: #fff;
}

#xaxis {
  position: absolute;
  bottom: 7%;
  font-size: 14px;
}

#xaxis p {
  width: 25%;
  padding: 0 5px;
  display: inline-block;
  text-align: center;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

Answer 1

希望这对你有帮助

$(function() {
  var final_score = 3.2

  $('#container').highcharts({
    chart: {
      type: 'scatter'
    },
    title: {
      text: 'Industry Index',
      margin: 30,
      style: {
        fontSize: '14px'
      }
    },
    plotOptions: {
      scatter: {
        lineWidth: 2
      },
      line: {
        marker: {
          enabled: false
        }
      }
    },
    /*yAxis: {
    	tickInterval: 1,
    },*/
    xAxis: {
        categories: ['area1','area2','area3','area4']
    },
    series: [{
      name: 'Industry benchmark',
      data: [
        [0.5, 3],
        [1.5, 6.9],
        [2.5, 9.5],
        [3.5, 16.5]
      ],
      type: 'spline'
      // fillColor: 'rgba(252,96,18,0.8)'
    }, {
      name: 'Your Organisation',
      marker: {
        enabled: true,
        radius: 6
      },
      data: [
        [final_score, 14.05]
      ],
      type: 'spline'
    }]
  });
});

#container {
  position: relative;
  padding-top: 1em;
  background: #fff;
}

#xaxis {
  position: absolute;
  bottom: 7%;
  font-size: 14px;
}

#xaxis p {
  width: 25%;
  padding: 0 5px;
  display: inline-block;
  text-align: center;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>