Highcharts - 如何在使用addSeries时阻止xAxis重绘?

时间:2018-01-09 17:01:56

标签: javascript highcharts highstock

我有一个highstocks散点图,在系列数据初始化后,我使用addSeries添加了一条最佳拟合线(一旦我计算了端点)。

我遇到的问题是,当我添加新系列时,xAxis日期时间标签全部消失(它们最初是正确绘制的)。似乎是因为新系列只有两个点,图表重新绘制xAxis以迎合新系列,并仅使用一个日期时间标签绘制它。

看起来非常类似于this问题,这个问题从未解决

我怎样才能避免这种情况发生?

我无法分享我的实际代码,因为它嵌入在专有框架上的Java小部件中,但this Fiddle显示相同的行为

    Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    zoomType: 'x'
  },
  title: {
    text: 'Random data'
  },
  xAxis: {
    title: {
      enabled: true,
      text: 'Height (cm)'
    },
    type: 'datetime' //,
      // startOnTick: true,
      // endOnTick: true,
      // showLastLabel: true
  },
  exporting: {
    buttons: {
      customButton: {
        text: 'Add Series',
        onclick: function() {
          var newRegressionLineSeries = {
            type: 'line',
            name: 'Line series',
            data: [
              [Date.UTC(2015, 2, 26), 0.8],
              [Date.UTC(2015, 6, 28), 0.7]
            ],
            marker: {
              enabled: false
            },
            states: {
              hover: {
                lineWidth: 0
              }
            },
            enableMouseTracking: false
          };
          this.addSeries(newRegressionLineSeries);
        }
      }
    }
  },

  plotOptions: {
    scatter: {
      marker: {
        radius: 5,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: false
          }
        }
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x} cm, {point.y} kg'
      }
    }
  },

  series: [{
    name: 'Data',
    color: 'rgba(223, 83, 83, .5)',
    data: [
      [Date.UTC(2015, 2, 26), 0.9188],
      [Date.UTC(2015, 2, 27), 0.9184],
      [Date.UTC(2015, 2, 29), 0.9188],
      [Date.UTC(2015, 2, 30), 0.9231],
      [Date.UTC(2015, 2, 31), 0.9319],
      [Date.UTC(2015, 3, 1), 0.9291],
      [Date.UTC(2015, 3, 2), 0.9188],
      [Date.UTC(2015, 3, 3), 0.9109],
      [Date.UTC(2015, 3, 5), 0.9091],
      [Date.UTC(2015, 3, 6), 0.9154],
      [Date.UTC(2015, 3, 7), 0.9246],
      [Date.UTC(2015, 3, 8), 0.9276],
      [Date.UTC(2015, 3, 9), 0.9382],
      [Date.UTC(2015, 3, 10), 0.9431],
      [Date.UTC(2015, 3, 12), 0.9426],
      [Date.UTC(2015, 3, 13), 0.9463],
      [Date.UTC(2015, 3, 14), 0.9386],
      [Date.UTC(2015, 3, 15), 0.9357],
      [Date.UTC(2015, 3, 16), 0.9293],
      [Date.UTC(2015, 3, 17), 0.9254],
      [Date.UTC(2015, 3, 19), 0.9251],
      [Date.UTC(2015, 3, 20), 0.9312],
      [Date.UTC(2015, 3, 21), 0.9315],
      [Date.UTC(2015, 3, 22), 0.9323],
      [Date.UTC(2015, 3, 23), 0.9236],
      [Date.UTC(2015, 3, 24), 0.9196],
      [Date.UTC(2015, 3, 26), 0.9201],
      [Date.UTC(2015, 3, 27), 0.9184],
      [Date.UTC(2015, 3, 28), 0.9106],
      [Date.UTC(2015, 3, 29), 0.8983],
      [Date.UTC(2015, 3, 30), 0.8909],
      [Date.UTC(2015, 4, 1), 0.8928],
      [Date.UTC(2015, 4, 3), 0.8941],
      [Date.UTC(2015, 4, 4), 0.8972],
      [Date.UTC(2015, 4, 5), 0.8940],
      [Date.UTC(2015, 4, 6), 0.8808],
      [Date.UTC(2015, 4, 7), 0.8876],
      [Date.UTC(2015, 4, 8), 0.8925],
      [Date.UTC(2015, 4, 10), 0.8934],
      [Date.UTC(2015, 4, 11), 0.8964],
      [Date.UTC(2015, 4, 12), 0.8917],
      [Date.UTC(2015, 4, 13), 0.8805],
      [Date.UTC(2015, 4, 14), 0.8764],
      [Date.UTC(2015, 4, 15), 0.8732],
      [Date.UTC(2015, 4, 17), 0.8737],
      [Date.UTC(2015, 4, 18), 0.8838],
      [Date.UTC(2015, 4, 19), 0.8969],
      [Date.UTC(2015, 4, 20), 0.9014],
      [Date.UTC(2015, 4, 21), 0.8999],
      [Date.UTC(2015, 4, 22), 0.9076],
      [Date.UTC(2015, 4, 24), 0.9098],
      [Date.UTC(2015, 4, 25), 0.9110],
      [Date.UTC(2015, 4, 26), 0.9196],
      [Date.UTC(2015, 4, 27), 0.9170],
      [Date.UTC(2015, 4, 28), 0.9133],
      [Date.UTC(2015, 4, 29), 0.9101],
      [Date.UTC(2015, 4, 31), 0.9126],
      [Date.UTC(2015, 5, 1), 0.9151],
      [Date.UTC(2015, 5, 2), 0.8965],
      [Date.UTC(2015, 5, 3), 0.8871],
      [Date.UTC(2015, 5, 4), 0.8898],
      [Date.UTC(2015, 5, 5), 0.8999],
      [Date.UTC(2015, 5, 7), 0.9004],
      [Date.UTC(2015, 5, 8), 0.8857],
      [Date.UTC(2015, 5, 9), 0.8862],
      [Date.UTC(2015, 5, 10), 0.8829],
      [Date.UTC(2015, 5, 11), 0.8882],
      [Date.UTC(2015, 5, 12), 0.8873],
      [Date.UTC(2015, 5, 14), 0.8913],
      [Date.UTC(2015, 5, 15), 0.8862],
      [Date.UTC(2015, 5, 16), 0.8891],
      [Date.UTC(2015, 5, 17), 0.8821],
      [Date.UTC(2015, 5, 18), 0.8802],
      [Date.UTC(2015, 5, 19), 0.8808],
      [Date.UTC(2015, 5, 21), 0.8794],
      [Date.UTC(2015, 5, 22), 0.8818],
      [Date.UTC(2015, 5, 23), 0.8952],
      [Date.UTC(2015, 5, 24), 0.8924],
      [Date.UTC(2015, 5, 25), 0.8925],
      [Date.UTC(2015, 5, 26), 0.8955],
      [Date.UTC(2015, 5, 28), 0.9113],
      [Date.UTC(2015, 5, 29), 0.8900],
      [Date.UTC(2015, 5, 30), 0.8950],
      [Date.UTC(2015, 6, 1), 0.8950],
      [Date.UTC(2015, 6, 2), 0.8750],
      [Date.UTC(2015, 6, 3), 0.8650],
      [Date.UTC(2015, 6, 4), 0.8550],
      [Date.UTC(2015, 6, 5), 0.8150],
      [Date.UTC(2015, 6, 6), 0.8100],
      [Date.UTC(2015, 6, 7), 0.8070],
      [Date.UTC(2015, 6, 8), 0.8050],
      [Date.UTC(2015, 6, 9), 0.7990],
      [Date.UTC(2015, 6, 10), 0.7900],
      [Date.UTC(2015, 6, 11), 0.7850],
      [Date.UTC(2015, 6, 12), 0.7800],
      [Date.UTC(2015, 6, 13), 0.7750],
      [Date.UTC(2015, 6, 14), 0.7700],
      [Date.UTC(2015, 6, 15), 0.7650],
      [Date.UTC(2015, 6, 16), 0.7600],
      [Date.UTC(2015, 6, 17), 0.7550],
      [Date.UTC(2015, 6, 18), 0.7500],
      [Date.UTC(2015, 6, 19), 0.7450],
      [Date.UTC(2015, 6, 20), 0.7400],
      [Date.UTC(2015, 6, 21), 0.7350],
      [Date.UTC(2015, 6, 22), 0.7250],
      [Date.UTC(2015, 6, 23), 0.7150],
      [Date.UTC(2015, 6, 24), 0.7050],
      [Date.UTC(2015, 6, 25), 0.6900],
      [Date.UTC(2015, 6, 26), 0.6750],
      [Date.UTC(2015, 6, 27), 0.6600],
      [Date.UTC(2015, 6, 28), 0.6300],
    ]
  }]
});

1 个答案:

答案 0 :(得分:0)

一个简单的解决方法是创建一个新轴并在该轴上放置不足的点。

我通过以下方式更新了您提供的小提琴:

添加新的xAxis:

xAxis: [{
  id: '0',
  title: {
    enabled: true,
    text: 'Height (cm)'
  },
  type: 'datetime' 
},{
  id: '1', //new axis ID
  type: 'datetime',
  visible: false,
  linkedTo: '0'
}],

新行添加到新的xAxis:

var newRegressionLineSeries = {
  xAxis: '1', //Added this
  type: 'line',
  ...
}

工作示例: https://jsfiddle.net/xs9toj13/9/