可以使用 morris.js 创建 SED 图吗？ [关闭]答案

【问题标题】：Can a SED graph be created with morris.js? [closed]可以使用 morris.js 创建 SED 图吗？ [关闭]
【发布时间】：2014-09-10 12:06:50
【问题描述】：

这种图类型叫什么？

可以用 morris.js 重新创建吗？

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

如果没有，哪些广泛使用的 javascript 图形库支持它？

或者（这是为了赏金），如何编辑https://github.com/morrisjs/morris.js/ 来支持上面的图表？

我真的在寻求指点，但如果有人想为开源做出贡献并获得一些代表，我将非常感激。

但就像我说的那样，我应该在 morris 存储库中查看文件和函数的一些指针，以便能够创建上面的图表。

【问题讨论】：

当我知道图表的名称后，我会更新标题以使其更适合 Google 使用
这与 StackOverflow 无关
@ZachSaucier 如何使用 JavaScript 库创建图形类型？真的吗？
是的，绝对是题外话

标签： graph morris.js

【解决方案1】：

该图是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),

});

如您所见，它与您发布的图片完全不同。

逐个特征地浏览列表，

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

morris.js 也不支持 X 轴标签和 Y 轴标签，您可以使用 HTML 段落元素和 CSS3 书写模式属性或转换功能来完成它们，如文档中的 here 用于 Y 标签。带有日期和字符串的 Y 轴标签可以用同样的方式完成。

您可以手动将转换置于最高比例，也可以添加对最高比例和转换支持的支持。

为了支持对数刻度，您需要修改 morris.grid.coffee 和 morris.line.coffe。

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

根据工作量，morris.js 是一个漂亮的时间序列线图项目，你的图既不是线图，也不是时间序列线图。我认为您更适合使用 d3.js 或 Google Charts 或其他一些 JavaScript 图形库。

d3.js 散点图示例包括 here 和 here。还可以查看Iris SED Analysis Tool，它绘制 SED 并支持 NED 直接导入。

这些选项已经支持图形标题、散点图支持、x 和 y 轴标签支持、对数刻度支持和点的自定义字形，并且可以比通过编写 morris.js 扩展更容易地添加其他内容。

【讨论】：