Question

我正在使用Highcharts绘制-well- chart来构建仪表板应用程序。在高缩放级别或短时间间隔内，面积线图看起来到处都是。

我正在研究来自d3的插值选项，但没有找到太多。数据通过AJAX作为JSON检索到我的API，并呈现到图表中。通过运行新的API请求并刷新图表，定制的模式开关可以在“年”和“小时”之间切换数据分辨率。

data with 24-hour sampling rate

a detail of the same data, with 1-hour sampling rate

从上面的屏幕快照中可以看出，在较短的采样间隔内（当数据变化较大时），样条插值会简单地断开，曲线变为直线，样条点变为角度，并且区域和定界曲线通常会“分离”。 >

我正在寻找一种解决此问题的方法，或者至少使图表可读-所有格式。我可以更改图表格式（只要是堆叠的即可），但到目前为止，面积图最适合此类数据。

重新创建问题的jsfiddle在这里：

https://jsfiddle.net/_dario/s3o61gj4/

这是js代码：

// this defines some colors 
var igColor = "#fec564",  //instagram 
twColor = "#55acee",  //twitter
fbColor = "#3b5998",  //facebook
wbColor = "#a48ad5",  //blog
wfColor = "#e57e31",  //forum
wnColor = "#17c457",  //news 
inColor = "#007bb5",  //linkedin
ytColor = "#ff1216",  //youtube 
otColor = "#81959b";   //others

//this defines the chart configuration with NULL data - data are added via AJAX later on

  var config = {
    chart: {
      zoomType:'x',
      height:500
    },
    title: {
      text: 'Ugly chart'
    },
    xAxis: {
      type: 'datetime'
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Posts'
      }
    },
    legend: {
      enabled:true
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: [
    {
      type: 'areaspline',
      name: 'Instagram',
      data: null,
      color:igColor
    },{
      type: 'areaspline',
      name: 'Twitter',
      data: null,
      color:twColor
    },{
      type: 'areaspline',
      name: 'Facebook',
      data: null,
      color:fbColor
    },{
      type: 'areaspline',
      name: 'Blogs',
      data: null,
      color:wbColor
    },{
      type: 'areaspline',
      name: 'News',
      data: null,
      color:wnColor
    },{
      type: 'areaspline',
      name: 'Forums',
      data: null,
      color:wfColor
    },{
      type: 'areaspline',
      name: 'Youtube',
      data: null,
      color:ytColor
    },{
      type: 'areaspline',
      name: 'Linkedin',
      data: null,
      color:inColor
    },{
      type: 'areaspline',
      name: 'Others',
      data: null,
      color:otColor
    }
    ] 
  }; //end config definition

//THESE DATA ARE ORIGINALLY RETURNED BY AN AJAX CALL TO MY API

var d = {
"ig":[[1550880000000,1],[1550883600000,1],[1550890800000,1],[1550898000000,1],[1550901600000,3],[1550905200000,1],[1550908800000,6],[1550912400000,6],[1550916000000,6],[1550919600000,9],[1550923200000,4],[1550926800000,7],[1550930400000,5],[1550934000000,5],[1550937600000,12],[1550941200000,8],[1550944800000,6],[1550948400000,7],[1550952000000,6],[1550955600000,3],[1550959200000,3],[1550962800000,4],[1550966400000,1],[1550970000000,1],[1550977200000,1],[1550988000000,3],[1550991600000,4],[1550995200000,6],[1550998800000,6],[1551002400000,9],[1551006000000,4],[1551009600000,9],[1551013200000,11],[1551016800000,9],[1551020400000,7],[1551024000000,6],[1551027600000,7],[1551031200000,4],[1551034800000,6],[1551038400000,9],[1551042000000,4],[1551045600000,6]],
"tw":[[1550880000000,1],[1550901600000,1],[1550905200000,1],[1550908800000,2],[1550912400000,4],[1550916000000,1],[1550919600000,4],[1550923200000,2],[1550926800000,1],[1550930400000,5],[1550934000000,1],[1550937600000,1],[1550941200000,1],[1550944800000,5],[1550948400000,1],[1550952000000,1],[1550959200000,3],[1550962800000,1],[1550966400000,1],[1550988000000,1],[1550991600000,2],[1550995200000,4],[1550998800000,5],[1551006000000,3],[1551009600000,4],[1551013200000,3],[1551016800000,3],[1551020400000,2],[1551024000000,3],[1551027600000,3],[1551031200000,2],[1551034800000,2],[1551038400000,3],[1551042000000,1],[1551045600000,1],[1551049200000,2],[1551052800000,1]],
"ty":[[1550880000000,4],[1550898000000,1],[1550908800000,1],[1550912400000,3],[1550916000000,2],[1550919600000,3],[1550923200000,2],[1550926800000,1],[1550930400000,2],[1550937600000,3],[1550941200000,4],[1550944800000,2],[1550948400000,2],[1550952000000,1],[1550955600000,1],[1550959200000,1],[1550962800000,2],[1550966400000,2],[1550995200000,3],[1550998800000,13],[1551002400000,1],[1551006000000,1],[1551013200000,4],[1551016800000,3],[1551024000000,1],[1551027600000,2],[1551031200000,1],[1551034800000,1],[1551038400000,3],[1551042000000,1],[1551049200000,5],[1551052800000,5]],
"wb":[[1550880000000,6],[1550887200000,1],[1550898000000,1],[1550912400000,1],[1550916000000,1],[1550919600000,1],[1550926800000,2],[1550930400000,1],[1550944800000,1],[1550991600000,1],[1550998800000,1],[1551016800000,1],[1551024000000,1],[1551027600000,1],[1551049200000,1],[1551052800000,1]],
"wf":[[1551034800000,1],[1551049200000,2],[1551052800000,2]],
"wn":[[1550880000000,16],[1550883600000,1],[1550898000000,1],[1550901600000,1],[1550905200000,2],[1550908800000,1],[1550912400000,1],[1550916000000,1],[1550919600000,1],[1550923200000,1],[1550934000000,1],[1550941200000,1],[1550944800000,1],[1550962800000,4],[1550966400000,4],[1550984400000,2],[1550988000000,1],[1550991600000,1],[1550995200000,1],[1551006000000,1],[1551009600000,2],[1551013200000,1],[1551049200000,19],[1551052800000,19]],
"in":[],"yt":[],"ot":[]}; //end data

//this part happens inside a SUCCESS statement in the AJAX call that retrieves the data above

//parse the returned data into the chart config above, substituting NULL values
     config.series[0].data = d.ig;
     config.series[1].data = d.tw;
     config.series[2].data = d.ty;
     config.series[3].data = d.wb;
     config.series[4].data = d.wn;
     config.series[5].data = d.wf;
     config.series[6].data = d.yt;
     config.series[7].data = d.in;
     config.series[8].data = d.ot;

//create the chart

     if(window.sourcesChart){
      window.sourcesChart.update(config);
    } else {
      window.sourcesChart = new Highcharts.chart('platformChartContainer', config);
    }

Answer 1

由于该级别的数据存在更多差异，因此空值之间的断开更加明显。如果您在plotOptions.series上使用'connectNulls'属性，它将使图表更具可读性。

plotOptions: {
  series: {
    stacking: 'normal',
    connectNulls: true
  }
}

https://jsfiddle.net/ym8fn75x/

为什么我的Highcharts堆积区域样条线图看起来很有趣？

1 个答案: