Question

我想做的事情很有趣，但我一直在努力思考：

我所做的事情：

我有一个包含100个数据集的CSV文件。这些数据集是我在Y轴上绘制的点。

所有100个点都按预期显示在HighCharts图上，如下图所示：

代码：

以下是我用于获得上述结果的代码：

SELECT OrderNo, SUM(Quantity) FROM Orders
INNER JOIN Heading ON Orders.OrderID = Heading.OrderID
WHERE ComponentType LIKE 'Cavity' 
AND  ( OrderNo LIKE '73966' OR OrderNo LIKE '73967')
GROUP BY OrderNo

我要实现的目标：

我只想在图表上显示前10个点。
我想通过删除最后10个图直到我达到所有100点，来在10个10个补丁中显示其他数据，但在同一张图中。

使用JavaScript在Highcharts中有可能吗？如果是这样，那么请建议我该怎么做？

非常感谢您的帮助。

这是工作中的JS小提琴。

Answer 1

有点，但是有效。

使用[{id=1, name = test ...... }]选项使图表可滚动。
用scrollablePlotArea和div包裹图表，以隐藏滚动条。
运行脚本以进行滚动动画

overflow: hidden

var xValues = [];
xValues = [1, 4, 3, 9, 3, 4, 4, 6, 4, 5, 3, 4, 3, 3, 1, 3, 2, 3, 2, 3, 4, 4, 3, 3, 4, 3, 5, 3, 6, 7, 3, 2, 5, 7, 4, 6, 7, 3, 6, 7, 4, 7, 4, 7, 3, 2, 5, 6, 7, 4, 3, 4, 6, 6, 7, 4, 6, 6, 7, 3, 6, 7, 3, 2, 4, 5, 6, 5, 9, 8, 4, 6, 2, 1, 5, 8, 5, 8, 2, 6, 3, 8, 4, 7, 3, 6, 1, 5, 8, 0, 2, 4, 7, 5, 8, 3, 7, 9, 3, 7];

const drawAnimationDuration = 5000;

Highcharts.chart('ppg', {
  chart: {
    type: 'line',
    // use that option to let the rest of the chart be scrollable. Play with the "minWidth" value if you need
    scrollablePlotArea: {
      minWidth: 800,
      scrollPositionX: 0
    }
  },
  title: {
    text: 'ECG Data'
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    crosshair: false
  },
  yAxis: {
    title: {
      text: 'Peaks'
    }
  },
  tooltip: {
    enable: false
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: '',
    lineWidth: 2,
    data: xValues,
    animation: {
      duration: drawAnimationDuration
    }
  }]
});

// wait for the chart to done the animation.
// play with the second parameter (duration) of the `.animate` function (currently is 10000) to accelerate or slow down. For more info: https://api.jquery.com/animate/#duration
setTimeout(() => {
  $('.highcharts-scrolling').animate({
    scrollLeft: $('.highcharts-container').width()
  }, 10000, 'linear');
}, drawAnimationDuration)

#ppg {
  max-width: 800px;
  min-width: 320px;
  height: 400px;
  width: 400px;
}

.ppg-wrapper {
  /* hide the child's scrollbar */
  overflow-y: hidden;
  height: 400px;
}

Answer 2

我了解的是分10点分批显示数据。

我可以想到两种方法。第一个是在每个批次上添加点，第二个是更改最小/最大属性。

一种方法将水平扩展图表，另一种方法将弹出图表内部的线。我不知道您到底想要什么，所以这里有两种方法：

最小/最大：https://jsfiddle.net/xaj42sLp/

var data = [];
for (var i = 0; i < 100; i++) {
    data.push(Math.floor(Math.random()*10));
}
let max = 10;
var chart = Highcharts.chart('container', {
        xAxis: {
        min: 0,
        max: max
    },
    plotOptions: {
        series: {
                label: {
                enabled: false
            },
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        data: data
    }]
});
function nextUpdate() {
    max+= 10;
    chart.xAxis[0].update({
        max: max
    });
    if (max < data.length) {
            setTimeout(nextUpdate, 1000);
    }
}
setTimeout(nextUpdate, 1000);

系列分数：https://jsfiddle.net/xaj42sLp/1/

var data = [];
for (var i = 0; i < 100; i++) {
    data.push(Math.floor(Math.random()*10));
}
let max = 10;
var chart = Highcharts.chart('container', {
        xAxis: {
        min: 0,
        max: data.length
    },
    plotOptions: {
        series: {
                label: {
                enabled: false
            },
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        data: data.slice(0, max)
    }]
});
function nextUpdate() {
    // Avoid setData for performance reasons
    for (var i = max; i < max+10; i++) {
        chart.series[0].addPoint(data[i]);
    }
    max+= 10;
    if (max < data.length) {
            setTimeout(nextUpdate, 1000);
    }
}
setTimeout(nextUpdate, 1000);

注意：Highcharts有很多动画选项。您可以检查here API并搜索animation关键字。使用上面的setTimeout和动画选项，您可以很好地微调动画。

编辑：得到您的需要。这是一个解决方案：

线性直播：https://jsfiddle.net/aks7vu1w/

var chart = Highcharts.chart('container', {
        chart: {
            animation: {
            duration: 500,
            easing: function(t) {return t;}
        }
    },
    xAxis: {
        min: 0,
        max: 9
    },
    plotOptions: {
        series: {
                label: {
                enabled: false
            },
            marker: {
                enabled: false
            }
        }
    },
    series: [{
        data: []
    }]
});
let pointCount = 0;
function nextPoint() {
    let completed = false;
    chart.xAxis[0].setExtremes(Math.max(pointCount-9, 0), pointCount < 10 ? 9 : pointCount);
    chart.series[0].addPoint([pointCount, Math.floor(Math.random()*10)], true, pointCount >= 10);
    pointCount++;
    setTimeout(function() {
        // Needed so animations don't overlap 
        requestAnimationFrame(nextPoint);
    }, 500);
}
nextPoint();

高图，将总数据显示为实时流

2 个答案: