Question

我试图围绕高图绘制锯齿图的原因？（实时数据）

看看下面这个小提琴，它的图表类型设置为＆＃39; area＆＃39; +正常堆叠。（从高图＆＃39; Live Data＆＃39;示例）

分叉

使用＆＃39;堆叠：正常＆＃39;绘制锯齿图。 http://jsfiddle.net/eladchen/4cmz5p2x/5/

  // Create the chart
  $('#container').highcharts('StockChart', {
    chart: {
      type: "area",
      events: {
        load: function() {
          var series  = this.series[0];
          var series2 = this.series[1];

          setInterval(function() {
            var x = (new Date()).getTime();
            var y = Math.round(Math.random() * 100);

            series.addPoint([x, y]);
            series2.addPoint([x, Math.round(Math.random() * 100)])
          }, 1000);
        }
      }
    },

        navigator:     {
            enabled: false
        },

        scrollbar:     {
            enabled: false
        },

        rangeSelector: {
            enabled: false
        },

    plotOptions: {
      series: {
        stacking: "normal", // <---
        marker: {
          enabled: true,
          radius: 6
        }
      }
    },

    series: [{
      name: 'Random data',
      data: [
        [1472553132251, 38],
        [1472553133251, 79]
      ]
    }, {
      name: 'Random data2',
      data: [
        [1472553132251, 338],
        [1472553133251, 179]
      ]
    }]
  });

没有＆＃39;堆叠＆＃39; http://jsfiddle.net/eladchen/4cmz5p2x/6/

 // Create the chart
  $('#container').highcharts('StockChart', {
    chart: {
      type: "area",
      events: {
        load: function() {
          var series  = this.series[0];
          var series2 = this.series[1];

          setInterval(function() {
            var x = (new Date()).getTime();
            var y = Math.round(Math.random() * 100);

            series.addPoint([x, y]);
            series2.addPoint([x, Math.round(Math.random() * 100)])
          }, 1000);
        }
      }
    },

        navigator:     {
            enabled: false
        },

        scrollbar:     {
            enabled: false
        },

        rangeSelector: {
            enabled: false
        },

    plotOptions: {
      series: { // No stacking property <---
        marker: {
          enabled: true,
          radius: 6
        }
      }
    },

    series: [{
      name: 'Random data',
      data: [
        [1472553132251, 38],
        [1472553133251, 79]
      ]
    }, {
      name: 'Random data2',
      data: [
        [1472553132251, 338],
        [1472553133251, 179]
      ]
    }]
  });

任何人都可以了解一下“正常”的情况。堆叠可以用于＆＃34;区域＆＃34;键入的图表+实时数据，没有图表看起来像这样？

据我所知，这不是具有这些设置的图形（＆＃34;区域＆＃34;）应该是什么样的，它应该像它一样堆叠它们，除非它不应该＆＃39;是任何白色空间/锯齿状外观。

Answer 1

这是一个奇怪的问题！由于第二个（灰色）系列上每个“锯齿”边缘的开始看起来总是从null或零重新开始，我尝试了connectNulls属性。

这似乎可以解决您的问题：

plotOptions: {
    area: {
        connectNulls: true  // this will stop the "serrated" appearance
    },
    series: {
        stacking: "normal",
        marker: {
            enabled: true,
            radius: 6
        }
    }
},

这是一个有效的代码片段：

$(function() {

  Highcharts.setOptions({
    global: {
      useUTC: false
    }
  });

  // Create the chart
  $('#container').highcharts('StockChart', {
    chart: {
      type: "area",
      events: {
        load: function() {
          var series  = this.series[0];
          var series2 = this.series[1];
          
          setInterval(function() {
            var x = (new Date()).getTime();
            var y = Math.round(Math.random() * 100);
            
            series.addPoint([x, y]);
            series2.addPoint([x, Math.round(Math.random() * 100)]);
          }, 1000);
        }
      }
    },

		navigator:     {
			enabled: false
		},
    
		scrollbar:     {
			enabled: false
		},
    
		rangeSelector: {
			enabled: false
		},

    plotOptions: {
    	area: {
      	connectNulls: true	// this will stop the "serrated" appearance
      },
      series: {
        stacking: "normal",
        marker: {
          enabled: true,
          radius: 6
        }
      }
    },

    series: [{
      name: 'Random data',
      data: [
        [1472553132251, 38],
        [1472553133251, 79]
      ]
    }, {
      name: 'Random data2',
      data: [
        [1472553132251, 338],
        [1472553133251, 179]
      ]
    }]
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 250px; min-width: 310px"></div>

我不确定为什么会发生这种情况，但我的猜测是，计算区域图表的方式与实时数据绘制不完全吻合...新的连接以前的分数在第一个之后就会丢失。如果您要将stacking设置为percent，这似乎不是问题。

我希望这有用！

Highcharts＆＃39; area＆＃39;具有正常堆叠的类型看起来很奇怪

1 个答案: