Question

我有一个字符，我想在xAxis类别上显示一些文字，我将动态创建xAxis数组，每个标签的tickInterval必须为5，我可以使用数字执行此操作，但我不会＆＃39 ;我知道如何用文字来做，如果我的图表在这里：

＆＃13;

$(document).ready(function () {
  $('#xd').click(function () {
    draw();
  });
});

function draw() {
  var myArray = [];
  myArray = [1, 5, 10, 11, 8, 6, 7 ,8 ,9, 10];
  var dates = [];
  dates = ["11/Nov/16", "11/Dic/16"];
  
  $('#grafic').highcharts({
        
        title: {
            text: 'Sampled Parts'
        },
        xAxis: {
          tickInterval:5,
            categories: dates,
            labels: {
                rotation: -33,
            },
          
        },
        yAxis: {
            allowDecimals: true,
            min: 0,
            title: {
                text: 'Resultados'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        legend: {
            reversed: true
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'My Data',
            data: myArray
        }]
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>



<div id="grafic">
</div>

<button id="xd">Click</button>

＆＃13;

换句话说，我想显示11/Dic/16 instead of 5我该怎么做？

PD。如果我将另外5个值添加到myArray，将另一个日期添加到dates，这应该有用。

Answer 1

您的第二个类别名称的值为1，因此它会显示在第二个刻度下。如果你想使用类别，那么你必须用一些值填充它。

dates = ["11/Nov/16", '', '', '', '', "11/Dic/16"];

示例：https://jsfiddle.net/ty7qs88y/

我认为更好的方法是不使用类别数组，但是线性轴和标签格式化程序直接调用日期数组。

 xAxis: {
      tickInterval:5,
        type: 'linear',

        labels: {
            rotation: -33,
            formatter: function () {
                return dates[this.value / 5];
            }
        },

    },

示例：https://jsfiddle.net/ty7qs88y/1/

如果您使用日期时间值 - 您可以始终使用日期时间轴，然后只格式化它的显示方式。见API Docs

动态xAxis Highcharts

1 个答案: