酒窝.js使用日期范围过滤 X 轴

dimple.js filter x axis with date range

本文关键字：过滤 范围 日期 js 酒窝      更新时间：2023-09-26

我正在研究酒窝js(d3(图表，并寻找使用日期范围过滤它。不久，我正在开发带有日期范围输入的图表，提交后形成我的酒窝.js图表将被刷新并显示所选日期范围的图表。

我正在使用 .tsv 文件生成报告图。 我的代码如下所示。

d3.tsv("data.tsv", function (data) {
    myChart = new dimple.chart(svg, data);
    myChart.setMargins("60px", "10px", "10px", "75px");
    var x = myChart.addCategoryAxis("x", "Month");
    x.addOrderRule("Date");
    var y = myChart.addMeasureAxis("y", "Sales Value");
    y.showGridlines = true;
    y.tickFormat = ',.2f';    
    myChart.addSeries(null, dimple.plot.bar);
    myChart.draw(1000);
});

帮我解决这个问题。提前谢谢。

恐怕你不能直接在酒窝里做到这一点，.js。

一种更好、更简单的方法是在每次提交表单时创建和筛选数据集，并再次呈现酒窝图。几天前，我曾从事过一个类似的项目，我必须根据用户设置的范围过滤我的酒窝图。

您可以将文件的内容放在表示文件的行和列的 2D 数组中，而不是直接将 .tsv 文件作为数据。我使用 java 完成了此操作，然后将此数组传递给我的 JavaScript 代码。

假设xydata[][]是我们的数组，"月"列存储在行xydata[0][i]中，"销售值"列存储在行xydata[1][i]

现在，每次提交表单时，您都需要创建数据集，并根据需要进行过滤。代码如下：

function createChart(range)
{
xydata=[["Jan","Feb","Mar","Apr","May"],[10,20,30,40,50]];  //Created data example
var data=[]; //Array for filtered data
var range="Apr";   //Passed from the form
for(var i=0;i<xydata[0].length;i++){
  if(range<xydata[0][i])  //Filtering Condition.. Additional logic required here
data.push({
  Months:xydata[0][i],
  SalesValue:xydata[1][i]
}
         );
}
//data now contains the filtered data (before April in this case)
myChart = new dimple.chart(svg, data);
//and then draw the chart accordingly.
};

注意：您将需要一些额外的逻辑来让编译器知道，例如，1 月 <4 月

我写了一个通用示例

相关文章：