Highchart js最多绘制15幅图

Highchart js max 15 plots to be plotted

本文关键字：绘制 15幅图 js Highchart      更新时间：2023-09-26

我在Highchart js中尝试了很多，但仍然找不到减少系列中元素数量的方法。

如果我得到的数据超过15天，我必须将其减少并显示给用户作为15天的数据，这样用户就可以在不拥挤数据的情况下看到数据。该系列最多90天，我不得不将其减少到15天。

在中查看我的当前代码http://jsfiddle.net/MULZL/

有人能给我一个解决办法吗？

p.S.：我不想把它减少到前15天或最后15天。我想这么做只是因为在图表中显示90天看起来很拥挤，我不想应用缩放功能。我想要忽略一些数据（天）的解决方案，如果超过15天，则为15天

您可以使用Axis.setExtremes方法以编程方式缩放到所需的时间范围。在你的情况下，你可能想在加载时进行

以下是您的操作方法，如果您想放大给定数据的前15天，您可以很容易地修改为放大最后15天。

function zoomTo15Points(chart){
    var points=chart.series[0].points;
    if(points.length<15)   return;
    var min=points[0].x;    
    var max=points[14].x;
    // If you wish to zoom to 15 days and not 15 points, you can modify max as
    // var max=min + 1000*60*60*24*14
    chart.xAxis[0].setExtremes(min,max);    
    chart.showResetZoom();
}

如果你不想让用户缩小，你可以禁用最后一行，但你也必须禁用缩放，否则如果用户在15天内缩放，按钮就会出现。

jsFiddle 加载时的高图表缩放

您可以尝试highStock 的数据分组功能

var dataGrouping = {
    groupPixelWidth: 40,
    units: [[
        'day',
        [1, 2, 3,4,5,6]
        ]]
};

Highcharts将确保所有列至少具有指定的宽度（40），如果库仑数很大，因此不可能具有该宽度，它将使用单位对数据进行分组，因此它将1天的数据分组为1列或2天的数据组为1列，依此类推。不确定你是否真的想要15个绘图，但我认为你担心的是避免数据拥挤，这正是这样做的，但列的数量会根据你指定的宽度、绘图区域的宽度、允许的单位及其倍数而变化。根据您的数据和图表宽度调整值。jsFiddle

相关文章：