javascript - 如何在新点 Highcharts 中添加动态 xaxis 类别标签名称

Question

我需要将点添加到 Highcharts x,y 。我无法在标签中添加我的自定义 xaxis。标签自动添加 potit 索引。如何在新点 xaixs 标签中添加我的文本？

    var chartPresure = $('#PresureContainer').highcharts();
        var series = chartPresure.series[0];
        var newpointPresure = updatedresult.Pressure;
        if (lastDate != updatedresult.RegisterDatePersian) {
            var x = updatedresult.RegisterDatePersian,
                y = updatedresult.Pressure;
            series.addPoint([x, y, updatedresult.RegisterDatePersian], true);

            series.drawPoints();

            lastDate = updatedresult.RegisterDatePersian;
        }

Answer 1

您可以在点添加事件后更新轴标签

function addPoint() {
  chart.series[0].addPoint(
    Math.floor(Math.random() * 6) + 1,
    true,
    false
  );
  //console.log(chart.xAxis[0].categories)
  chart.xAxis[0].categories.push(chart.series[0].data.length + 'th element')
  //console.log(chart.xAxis[0].categories)
  //update chart with category
  chart.update({
    xAxis: {
      categories: chart.xAxis[0].categories
    },
  });
}

var chart = new Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked column chart'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]
  }]
});

function addPoint() {
  chart.series[0].addPoint(
    Math.floor(Math.random() * 6) + 1,
    true,
    false
  );
  //console.log(chart.xAxis[0].categories)
  chart.xAxis[0].categories.push(chart.series[0].data.length + 'th element')
  //console.log(chart.xAxis[0].categories)
  chart.update({
    xAxis: {
      categories: chart.xAxis[0].categories
    },
  });
}

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<button onclick="addPoint()" class="autocompare">Add point</button>