Highcharts - 由阴谋导致的第三个系列'隐藏'

我有一些信息是在这种格式（速度，频率，日期）。会发生什么是我需要以速度x频率绘制此图表，但我希望允许用户使用未在图表上显示的日期进行导航过滤。Highcharts - 由阴谋导致的第三个系列'隐藏'

此外，我有一些不是动态构建的信息，这是速度x频率的极限。此信息将作为参考点固定在图上。所以，当我过滤绘图信息（而不是限制）时，它必须始终显示这些限制图。

您可以通过此图表得出一个想法，该区域图显示了点（速度，频率）的限制。然后，我会添加速度点x频率（x日期），然后按日期过滤。

你们能给我一些建议吗？

这里是一个的jsfiddle

data: [ 
       [0, 20, here is a date], [10, 20,here is a date], 
       [50, 39.9994, here is a date], [100,49.7494, here is a date] 
      ],

专家，请注意在系列阵列中的每个元素有3个要素[A，B，C]，假设第三个（c）中是DATE，而不是随机数，因为它现在是。我希望能够使用评论的导航代码通过此C元素过滤本系列，该元素实际上并不出现在您看到的图表上，它是一个隐藏元素，仅用于过滤数据。

来源

2016-11-18 bobleujr

你能上的jsfiddle添加代码？我不确定你的意思是过滤。如果你有每个点的信息部分 - 你可以定义一个点，它将存储所有的信息 - x，y是坐标（速度，频率），第三个'隐形'信息将是日期和基于你可以处理的日期要点并采取适当的行动。 – morganfree

我根本不理解这个需求。你想如何表示速度和频率？日期是绘制在X轴上，还是只显示数据集中显示数据的过滤器？什么是你的X轴？你的y轴是什么？这个不适合你的部分是什么？如果过滤数据是主要问题，那么您需要一些您在图表之外编写的函数，这些函数循环遍历数据并在日期参数中构建一组新的点。然后你可以使用'series.setData'或'series.update（）'函数。 – jlbriggs

我更新了它们，希望它更有意义！ – bobleujr

如果你想在同一个图表中有一个导航器，会有一点棘手。导航器仅与日期时间数据一起工作，并且必须与主图表中的轴连接。

所以，你有这种格式的数据：

var points = [ 
    [5, 9, Date.UTC(2016, 1, 0)], 
    [65, 6, Date.UTC(2016, 1, 1)], 
    ...

需要两个X轴 - 一个表示连接到导航数据和其他。第二个轴必须可见才能使用导航器，并且必须连接日期时间数据。

所以，现在除了两个x轴，你需要两个系列 - 一个是实际数据，另一个是第一系列的[date, y]值。附加数据将在导航器中显示 - 请注意，在导航器中，您无法使用分散系列 - 因此它会被转换为线条系列 - 发生错误，您的数据应按日期排序。

series: [{ 
    id: 'main-series', 
    data: points.map(function(point) { 
    return [point[0], point[1], point[2], point[1]] 
    }), 
    showInNavigator: false, 
    xAxis: 1, 
    keys: ['x', 'y', 'date', 'holdY'] //holdY is for easier hiding points 
}, { 
    xAxis: 0, 
    data: points.map(function(point) { 
    return [point[2], point[1]]; 
    }), 
    showInNavigator: true, 
    enableMouseTracking: false, 
    color: 'transparent', 
    showInLegend: false 
}], 

xAxis: [{ 
    minRange: 1000 * 3600 * 24, 
    type: 'datetime', 
    tickLength: 0, 
    tickLength: 0, 
    labels: { 
    enabled: false 
    }, 
}, { 
    type: 'linear' 
}],

你最后需要一个回调，它将在导航器中的极值之后隐藏/显示点。隐藏/显示取决于日期的第三点属性。没有直接的API来隐藏/显示特定的点（除了饼图），但可以通过将点的值设置为空来实现（这就是为什么我保存了真实的y的原因）。

events: { 
    afterSetExtremes: function(e) { 
    var points = this.chart.get('main-series').points; 
    points.forEach(function(point) { 
     point.update({ 
     y: e.min <= point.date && point.date <= e.max ? point.holdY : null 
     }, false, false); 
    }); 
    this.chart.redraw(); 
    } 
}

例如：https://jsfiddle.net/3wuwdonn/1/

我会考虑使用导航器作为一个单独的图表，那么你就不需要在主图中的第二个x轴和系列，你不会需要让他们看起来不可见。

例如利用导航器仅图表这里：http://jsfiddle.net/f7Y9p/

来源

2016-11-21 14:40:36 morganfree

这正是我想要的。非常感谢你，非常好的解释。 – bobleujr

Highcharts - 由阴谋导致的第三个系列'隐藏'

回答

相关问题