Question

我想用正在发生的JSON数据中的值标记xaxis，但它正在错误的位置打印，如屏幕截图所示：

这里只有七个值以这种方式标记，但实际数据是通过留一个间隙绘制的。例如，在11日有价值，然后在13吨，所以总共七个值，但采取14个位置，并标签正确地采取前七个位置如何匹配标签和条形图

以下是我的代码段：

var obj = data[$("#host").val()].stats_vol.result.sectoutput;
      var my_data_list = [];
      var my_data_list1 = [];
      var my_data_list2 = [];
      var volumes = [];
      for(var key in obj) {
          var avg_latency = parseInt(obj[key].avg_latency);
          var read_latency = parseInt(obj[key].read_latency);
          var write_latency = parseInt(obj[key].write_latency);
                console.log(key);
                volumes.push(key);
                my_data_list.push('Average Latency', parseInt(avg_latency));
                my_data_list1.push('Read Latency', parseInt(read_latency));
                my_data_list2.push('Write Latency', parseInt(write_latency));

          } 

  $('#graphcontainer3').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Volume Level Latency'
    },


    yAxis: {

        tickInterval: 100,


        title: {
            text: 'Latency(ms)'
        }
    },
    xAxis: {
        categories: volumes,

    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} ms</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 2
        }
    },
    series: [{
        name: 'Average latency',
        data: my_data_list,

    }, {
        name: 'Read Latency',
        data: my_data_list1,

    }, {
        name: 'Write Latency ',
        data: my_data_list2,


    }]
});

任何人都可以帮我解决这个问题吗？

Answer 1

我自己纠正了这个问题:)我只是给了标签两次

  var obj = data[$("#host").val()].stats_vol.result.sectoutput;
      var my_data_list3 = [];
      var my_data_list1 = [];
      var my_data_list2 = [];
      var volumes = [];
      for(var key in obj) {
          var avg_latency = parseInt(obj[key].avg_latency);
          var read_latency = parseInt(obj[key].read_latency);
          var write_latency = parseInt(obj[key].write_latency);
                console.log(avg_latency);
                volumes.push(key);
                my_data_list3.push(parseInt(avg_latency));   //here no need to give label again as it is done my volume(key)
                my_data_list1.push( parseInt(read_latency));
                my_data_list2.push(parseInt(write_latency)); 

          }

这就是我期待的输出。希望它可能对其他人有所帮助。

HighCharts：Xaxis标签错位

1 个答案: