Question

我正在研究dimple js（d3）图表并寻找过滤它的日期范围。我正在开发具有日期范围输入的图表，在提交之后，我的dimple.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);
});

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

Answer 1

恐怕你不能直接在dimple.js中这样做。

更好更简单的方法是每次提交表单并再次渲染凹坑图时创建和过滤数据集。几天前我在一个类似的项目上工作过，我必须根据用户设置的范围过滤我的凹坑图。

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

假设xydata[][]是我们的数组，＆＃34;月＆＃34;列存储在行xydata[0][i]中，并且＆＃34;销售值＆＃34;列存储在行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.
};

注意：您需要一些额外的逻辑来让编译器知道，例如Jan＆lt;四月

我写了一个通用的例子

dimple.js过滤x轴与日期范围

1 个答案: