堆栈内存溢出
  简体   繁体   English

Highcharts-使用addSeries时如何防止xAxis重绘？

[英]Highcharts - how to prevent xAxis redraw when using addSeries?

 原文  2018-01-09 17:01:56  3   1    javascript/ highcharts/ highstock

问题描述

I have a highstocks scatter chart and after the series data is initialised I add a line of best fit (once I've calculated the endpoints) using addSeries. 我有一张高股票散点图，在初始化系列数据后，我使用addSeries添加了一条最合适的线（一旦计算出端点）。

The problem I am having is that when I add my new series the xAxis datetime labels all disappear (they are originally drawn correctly). 我遇到的问题是，当我添加新系列时，xAxis日期时间标签全部消失（它们最初正确绘制）。 It seems like because the new series only has two points, the chart redraws the xAxis to cater for the new series and draws it with only a single datetime label. 好像因为新系列只有两个点，所以图表重新绘制了xAxis以迎合新系列，并仅用单个datetime标签绘制它。

Looks very similar to this issue which was never solved 看起来非常相似， 这个问题这是从来没有得到解决

How can I avoid this happening? 如何避免这种情况发生？

I can't share my actual code as it's embedded in a Java widget on a proprietary framework but this Fiddle shows the same behaviour 我无法共享我的实际代码，因为它们已嵌入专有框架中的Java小部件中，但是此 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 个解决方案

解决方案1
 0 已采纳  2018-01-10 11:48:05

An easy workaround would be to create a new axis and put the lines with insufficient points on that axis. 一个简单的解决方法是创建一个新轴，然后在该轴上放置点数不足的线。

I updated the fiddle you provided to achieve this in the following way: 我通过以下方式更新了您提供的小提琴以实现此目的：

Add new xAxis: 添加新的xAxis： 

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

New lines are added to the new xAxis: 将新行添加到新的xAxis中： 

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 高图：使用addSeries添加意向时强制执行选项 - Highcharts: enforce options when adding a serie with addSeries 高图-使用xAxis类别时设置xAxis范围？ - Highcharts - set xAxis range when using xAxis Categories? 如何使用 highcharts 向 xAxis 添加新聚合？ - How to add new aggregation to xAxis by using highcharts? 防止Highcharts重新绘制Axis的比例 - Prevent Highcharts to redraw Axis' scale 如何格式化Highcharts的xAxis - How to format the xAxis of Highcharts Highcharts addSeries不显示行 - Highcharts addSeries not showing line highcharts使用addSeries动态添加系列 - highcharts dynamically adding series with addSeries 高图xAxis - Highcharts xAxis 平移反向xAxis时Highcharts缩放问题 - Highcharts zoom issue when panning reversed xAxis 如何在AngularJS中更改路径时阻止视图重绘 - How to prevent view redraw when changing route in AngularJS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM