Question

如何找出确切的距离或使用Highchart设置x轴上两个刻度之间的精确距离（到像素）？

我使用过tickPixelInterval，它似乎没有设置轴上两个刻度之间的确切距离。

$(function drawCharts() {
  var chartData = [100, 120, 120, 140, 110, 110];
  var index = 1;
  $('#b').click(function() {
    var buttonB = document.getElementById('b');
    buttonB.disabled = true;
    if (index < chartData.length) {
      var x = index, // current time
        y = chartData[index];
      $('#container').highcharts().series[0].setData([chartData[index - 1]]);
      $('#container').highcharts().series[0].addPoint([chartData[index]]);

      setTimeout(function() {
        if (index === 1) {
          $('#container1').highcharts().series[0].addPoint([0, chartData[0]]);
        }
        $('#container1').highcharts().series[0].addPoint([x, y]);
        index++;
      }, 2000);
    }
    setTimeout(function() {
      buttonB.disabled = false;
    }, 3000);

  })
  $(document).ready(function() {
    var chart1 = new Highcharts.Chart({
      chart: {
        renderTo: 'container1',
        type: 'line',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
          load: function() {
            series = this.series[0];
          },
        }
      },
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: ''
        },
        gridLineWidth: 1,
        startOnTick: true,
        tickPixelInterval: 40,
        min: 0,
        max: 10
      },
      yAxis: {
        title: {
          text: ''
        },
        min: 0,
        max: 200
      },
      plotOptions: {
        line: {
          marker: {
            enabled: false
          }
        },
        series: {
          animation: {
            duration: 1000
          }
        }
      },
      tooltip: {
        formatter: function() {
          return Highcharts.numberFormat(this.y, 2) + 'GE';
        }
      },
      legend: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      series: [{
        name: '',
        data: []
      }]
    });
    var chart2 = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'line',
        animation: Highcharts.svg ? {
          duration: 2000
        } : false, // don't animate in old IE                marginRight: 10,
        events: {
          load: function() {
            series = this.series[0];
          },
        }
      },
      title: {
        text: ''
      },
      xAxis: {
        title: {
          text: ''
        },
        gridLineWidth: 1,
        startOnTick: true,
        tickPixelInterval: 80,
        categories: ['a', 'b'],
        min: 0,
        max: 1
      },
      yAxis: {
        title: {
          text: ''
        },
        min: 0,
        max: 200
      },
      plotOptions: {
        line: {
          marker: {
            enabled: false
          }
        },
        series: {
          animation: {
            duration: 2000
          }
        }
      },
      tooltip: {
        formatter: function() {
          return Highcharts.numberFormat(this.y, 2);
        }
      },
      legend: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      series: [{
        name: '',
        data: []
      }]
    });
  });
});

Answer 1

如果您控制图表的宽度，并使用边距设置控制绘图区域的宽度，并且您知道每个图表中将有多少刻度，这是一件简单的事情。

所以，图1：

width: 600,
margin: [10,25,50,75]

两个插槽，每个50像素宽

图表2：

ng-hide

10个插槽，每个50像素宽。

更新了小提琴：

http://jsfiddle.net/jlbriggs/k8r4s890/

输出：

Highchart：刻度之间的精确距离

1 个答案: