data-visualization - 寻找数据可视化框架

Question

Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。












想改善这个问题吗？更新问题，以便将其作为 on-topic用于堆栈溢出。

5年前关闭。



Improve this question




(我知道有关于数据可视化的文章，但没有一个能完全回答我的问题。)

我正在寻找一种从数据生成图表的工具。我想要一种能够为我做一些计算的工具，不仅可以很好地显示数据。

例如，以下是我运行的测试中的数据:

{
    "destination" : "30be317c-e586-4448-8fed-1a9481710670",
    "source" : "30be317c-e586-4448-8fed-1a9481710670",
    "userStatus" : "UNDEF",
    "testName" : "VolumeUp",
    "testStatus" : "WORKED",
    "testStart" : 1323378809108,
    "testEnd" : 1323378809108
}, {
    "destination" : "30be317c-e586-4448-8fed-1a9481710670",
    "source" : "30be317c-e586-4448-8fed-1a9481710670",
    "userStatus" : "FAILED",
    "testName" : "VolumeDown",
    "testStatus" : "FAILED",
    "testStart" : 1323378814065,
    "testEnd" : 1323378816077
}

请注意，目前这是JSON，但我可以将其转换为XML或将其推送到数据库(如果需要)。

我想拥有一种告诉工具的方法:

使用以下方法创建表:

第一列:"testStatus" : "WORKED"的数目

第二列:"testStatus" : "FAILED"的数目

第三列:1-2之间的百分比。

行:"testName"

以绿色

显示高于90％的百分比

计算仍然非常基础。
我进行了一些研究，发现了可以做到这一点的工具(JasperReport，SpagoBI，RapidMiner)，但是似乎所有这些工具都难以产生像我这样的简单报告。

有没有可以帮助我做到这一点的工具/框架？
还是我必须自己进行计算并使用Google Visualization API之类的工具来显示输出？

谢谢

最佳答案

我将看看诸如Sencha(ext-JS)之类的JavaScript库。

查看他们的文档:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel

您可以使用json格式使用数据定义商店。您可以根据每个记录的值向您的商店添加一个字段。如果需要将该值相对于所有其他值作为百分位数，则可以侦听“加载”事件并遍历记录以计算此“高” /“低”值。

Ext.create('Ext.data.Store', {
  storeId:'myStore',
  fields:['destination', 'source', 'testName', 'testStatus', 'testStart', 'testEnd'],
  data:{'items':[
    // ... your data here
  ]},
  proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        root: 'items'
    }
  }
});

然后，您可以使用数据的任何内置 View 来创建数据的网格 View 。您可以定义渲染器，该渲染器将添加具有计算值的类。使用简单的CSS，您可以使用不同的颜色为每个类着色。

Ext.create('Ext.grid.Panel', {
  title: 'My Data',
  store: Ext.data.StoreManager.lookup('myStore'),
  columns: [
    { header: 'Test Name',  dataIndex: 'testName' },
    { header: 'Value', 
       dataIndex: 'calculatedValue', 
       renderer: function(value) {
        return Ext.String.format('<span class="{0}">{1}</span>', value, value);
       } 
    },
    // Other columns
  ],
  height: 200,
  width: 400,
  renderTo: Ext.getBody()
});

关于data-visualization - 寻找数据可视化框架，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8513827/

上一篇：entity-framework - Entity Framework 代码首次更新错误，带有必需的导航属性已卸载

下一篇：sql-server-2008 - 用变量插入SQL Server

相关文章：

javascript - D3 快速链式转换不一致

javascript - 获取.attr ("display":none) to work on mouseout (D3. js)

python - python中的饼图雷达图(披萨片)

tomcat - 调整/最佳实践 Inetsoft 样式报告 BI 工具？

data-warehouse - 数据仓库中的代理键

charts - 如何创建一个饼图，其中元素可以属于多个切片？

javascript - 我如何使用 d3.js 将数据从 .tsv 绑定(bind)到 SVG 的路径以获得 Choropleth map

highcharts - 支持 d3 的仪表盘

database - hadoop vs teradata 有什么区别

excel - 无法在 Excel Webaccess Webpart 中刷新 Excel 连接

Answer 1

我将看看诸如Sencha(ext-JS)之类的JavaScript库。

查看他们的文档:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel

您可以使用json格式使用数据定义商店。您可以根据每个记录的值向您的商店添加一个字段。如果需要将该值相对于所有其他值作为百分位数，则可以侦听“加载”事件并遍历记录以计算此“高” /“低”值。

Ext.create('Ext.data.Store', {
  storeId:'myStore',
  fields:['destination', 'source', 'testName', 'testStatus', 'testStart', 'testEnd'],
  data:{'items':[
    // ... your data here
  ]},
  proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        root: 'items'
    }
  }
});

然后，您可以使用数据的任何内置 View 来创建数据的网格 View 。您可以定义渲染器，该渲染器将添加具有计算值的类。使用简单的CSS，您可以使用不同的颜色为每个类着色。

Ext.create('Ext.grid.Panel', {
  title: 'My Data',
  store: Ext.data.StoreManager.lookup('myStore'),
  columns: [
    { header: 'Test Name',  dataIndex: 'testName' },
    { header: 'Value', 
       dataIndex: 'calculatedValue', 
       renderer: function(value) {
        return Ext.String.format('<span class="{0}">{1}</span>', value, value);
       } 
    },
    // Other columns
  ],
  height: 200,
  width: 400,
  renderTo: Ext.getBody()
});