没有可用数据时如何添加零值？ (Canvas.js)

Question

我有一个 Canvas.js 股票图表（折线图），其中我显示每个时间（x 轴）的交互（y 轴）。

我得到一个 Array<Date> 并每小时对日期进行分组。根据数组中有多少日期具有相同的时间，我可以说出有多少交互，我在图表中用一个点显示。

如果在一个特定的小时内根本没有交互，则不会将点设置为零。它将线直接连接到下一个值，当然这会错误地显示数据。

所以我的问题是是否有一种本机方法可以将没有任何交互的时间设置为零。如果没有，我如何用零手动填充空白？

这是我的图表现在的样子： Stock Chart

这是 fiddle： https://jsfiddle.net/gx9hqs6o/39/

Answer 1

So my question is if there is a native way to set the hours - which don't have any interactions - to zero.

在 CanvasJS 中，传递的数据点在没有对数据点进行任何操作的情况下呈现。

If not, how do I fill the gaps manually with zeros?

您将必须遍历 dataPoints 数组，对于所有缺失的数据（间隙），您可以添加 y 值为 0 的缺失数据点。

下面是一段代码，

function addMissingDps(stockChart) {    
      for(var i = 0; i <stockChart.options.charts[0].data.length; i++) {
        var newDps = [];    
        var dps = stockChart.options.charts[0].data[i].dataPoints;

        /* Find Missing hours in a the dps array */
        var missingDates = dps.sort(function(a,b){
          return Date.parse(a.x) - Date.parse(b.x);
        }).reduce(function(hash){
          return function(p,c){
            var missingHoursNo = (Date.parse(c.x) - hash.prev) / (1000 * 60 * 60);
            if(hash.prev && missingHoursNo > 1) {
              for(var i = 1; i < missingHoursNo; i++)
                p.push(new Date(hash.prev + i * (1000 * 60 * 60)));
            }
            hash.prev = Date.parse(c.x);
            return p;
          };
        }(Object.create(null)),[]);

        /* Add missing dataPoints to the dataPoints array */    
        for(var j = 0; j < missingDates.length; j++) {
          dps.push({x: missingDates[j], y: 0})      
        }    

        /* Sort newly added dates */
        dps.sort(function(a,b){      
          return Date.parse(a.x) - Date.parse(b.x);
        });
      }  
    }

您可以查看 this JSFiddle 的工作示例。

没有可用数据时如何添加零值？ (Canvas.js)

How to add zero-values when there is no data available? (Canvas.js)

angular

typescript

canvasjs