代码之家 › 专栏 › 技术社区 › Starkers

能否使用morris.js创建SED图?[已关闭]

morris.js graph

-5

Starkers · 技术社区 · 11 年前

此图形类型称为什么?

它可以用morris.js重新创建吗?

如果是这样的话,请在codepen/jsfiddle上快速简单的示例(无需复制数据,但要演示垂直线和水平线)。

如果没有,有哪些广泛使用的javascript图形库支持它? graph

或者(这是为了赏金),怎么可能编辑 https://github.com/morrisjs/morris.js/ 以支持上面的图表?

我真的在征求意见,但如果有人想为开源做出贡献并获得一些代表,我会非常感激。

但正如我所说,我应该在morris repo中查看文件和函数的一些指针,以创建上面的图。

1 回复 | 直到 5 年前

Appleman1234 11 年前

该图是 SED or spectral energy distribution 图表或绘图 NASA/IPAC Extragalactic Database 。更多信息是 here .

它在绘图上显示错误栏,但不显示点标签。

并非所有SED图都与此相似,因此让我们描述一下此图的特点

图表标题
散点图
X轴标签
Y轴标签
X轴顶部刻度
X轴底部刻度
X轴对数刻度
Y轴对数刻度
点上的误差条
散点图上不同点的自定义字形
沿x轴的点标签
带字符串和日期的Y轴标签

它可以用morri.sjs重新创建,但添加所有缺失的功能需要一些努力。

这是我使用morris.js的现有功能(不添加任何功能)绘制上述链接中的一些数据的基本尝试。

HTML格式

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title> Chart Example</title>
</head>
<body>
  <p align="center">MRK 1014</p>
  <div id="line-example"></div>
</body>
</html>

JavaScript

Morris.Line({
  element: 'line-example',
  data: [
    { y: Math.log(1.45E+18), a: Math.log(6.41E-08) },
    { y:  Math.log(1.45E+18), a: Math.log(1.03E-07)   },
    { y:  Math.log(1.45E+18), a: Math.log(1.31E-07) },
    { y:  Math.log(1.45E+18), a: Math.log(6.28E-08)  },
    { y:  Math.log(1.45E+18), a: Math.log(8.55E-07)  },
    { y:  Math.log(1.45E+18), a: Math.log(8.55E-07)  },
    { y:  Math.log(1.45E+18), a: Math.log(5.59E-08) },
    { y:  Math.log(1.45E+18), a: Math.log(6.55E-08)  }
  ],
  xkey: 'y',
  ykeys: ['a', ],
  labels: ['Series A'],
  linewidth: 0,
  pointSize: 2,
  ymin : Math.log(1E-08),
  ymax : Math.log(1E3),

});

正如你所看到的,它看起来与你发布的图片完全不同。

逐个特征地浏览列表,

Graph Title不一定是morris.js功能的一部分,它可以是常规的html标题或段落元素。

morris.js也不支持X轴标签和Y轴标签,但您可以使用HTML段落元素和CSS3编写模式属性或转换函数来实现它们 here 用于Y标签。带日期和字符串的Y轴标签也可以用同样的方法。

您可以手动将转换放置在顶部刻度上,也可以添加对顶部刻度和转换支持的支持。

对于对数比例支持,您需要修改 morris.grid.coffee 和 morris.line.coffe .

与自定义字形和错误条支持以及沿x轴的分类标签相同。

根据工作量,morris.js是一个用于Pretty时间序列线图的项目,您的图既不是线图,也不是时间序列线。我认为你更适合使用d3.js、GoogleCharts或其他JavaScript图形库。

d3.js散点图示例包括 here 和 here 。同时结账 Iris SED Analysis Tool 它吸引SED并具有NED直接导入支持。

这些选项已经具有图形标题支持、散点图支持、x轴和y轴标签支持、对数比例支持以及点的自定义字形,其他内容可以比向morris.js编写扩展更容易添加。