【问题标题】:HighCharts : Xaxis lables misplacedHighCharts:Xaxis 标签放错了位置
【发布时间】:2016-02-03 13:31:14
【问题描述】:

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

这里只有七个值以这种方式标记,但实际数据是通过留下一个间隙来绘制的。例如,在第 11 处有值,然后在 13t 处再次出现,因此总共有 7 个值,但占据 14 个位置并正确标记前 7 个位置如何匹配标签和条形图

以下是我的代码 sn-p :

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,


    }]
});

任何人都可以帮助我在这段代码中使这项工作正常吗???

【问题讨论】:

  • 您的系列数据看起来如何?请注意,类别从 0 开始索引,因此在您的数据数组点中,您需要参考正确的类别索引。
  • @SebastianBochan 我知道它的 my_data_list 当我尝试在数据中正确绘制静态值时会产生问题。但是我使用 my_data_list 数组推送的 avg_latency 也包含 8 个值,那么为什么它的行为会这样在情节中。
  • i=my_data_list.push('平均延迟', avg_latency);控制台.log(i);我试图 console.log my_data_list 它的打印:2 4 6 8 10 12 同样。如何处理这个

标签: json highcharts


【解决方案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)); 
                                  
          } 

这是我所期望的输出。希望对其他人有帮助,因此得到回答。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多