如何在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

我在Highcharts text labels for y-axis

中发现了 Ricardo Alvaro Lohmann 的正确答案

Answer 2

希望这有助于你

＆＃13;

＆＃13;

$(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'
    }]
  });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;