Highcharts系列显示“柱形图”和“折线图”的不同数据

时间:2019-07-09 13:31:49

标签: javascript charts highcharts

我有一个带有两个Y轴的图表。两者均为折线图,一切正常。但是,当我将其更改为一个Y轴项的柱形图时,该图以不同的方式绘制。似乎缺少一些要点。我有一个按钮可以在“列”和“折线图”之间切换。单击按钮后,即使两种数据都相同,它也会显示不同类型的图形。这是我的JavaScript,

$.getJSON('https://api.myjson.com/bins/whjvj', function (dataSeries2) {
  $.getJSON('https://api.myjson.com/bins/dfoin', function (dataSeries1) {
    $('#container').highcharts('StockChart', {
      yAxis: [{
          height: 250,
          gridLineWidth: 1,
          title: {
            text: 'series 1',
            style: {
              color: '#3eca4f',
            },
          },
        },
        {
          title: {
            text: 'series 2',
            style: {
              color: '#888f94',
            },

          },
          top: 300,
          height: 100,
          offset: 0,
        },
      ],
      series: [{
          name: 'Series 1',
          yAxis: 0,
          type: 'line',
          data: dataSeries1,
        },

        {
          data: dataSeries2,
          name: 'Series',
          type: chartTypeRenew,
          yAxis: 1,
        },
      ],

    });


  });
});

And here is the fiddle of the same

有人可以帮我解决这个问题吗?预先感谢。

2 个答案:

答案 0 :(得分:2)

该问题是由dataGrouping引起的。默认情况下,approximation({sum})和column(“ average”)的line不同。您可以禁用dataGrouping或设置相同的approximation

plotOptions: {
    series: {
        dataGrouping: {
            approximation: 'average'
        }
    }
},

实时演示: https://jsfiddle.net/BlackLabel/vy9e580s/

API参考: https://api.highcharts.com/highstock/series.column.dataGrouping.approximation

文档: https://www.highcharts.com/docs/advanced-chart-features/data-grouping

答案 1 :(得分:1)

更改系列类型时,数据分组也会更改,因此点的近似值也有所不同。如果您将数据分组强行设置为“周”,它将看起来更加相似(尽管在其他一些时间间隔内可能很奇怪)。

将其添加到每个系列中以强制进行“周”数据分组(JSFiddle):

dataGrouping: {
    units: [[
        'week',
        [1]]
    ]
}

see the documentation以获取更多详细信息。