如何在html中生成这个图

Question

我想生成一个如下图所示的数字。该图主要显示沿区域长度的某些范围位置。

区域的长度在file1.txt中给出：

NP_123456.4: 110 
...

在一个文件中，该区域的centain范围（file2.txt）为：

NP_123456.4: 30-45, 65-80
...
.

在另一个文件（file3.txt）中，另一个区域：

NP_123456.4: 35, 47-50, 58-59
....
..

下一个文件（file4.txt）：

NP_123456.4: 38, 52, 69-88
..

如您所见，每个文件都有多个ID（我省略了它们），并且对于每个id都会有一个图表。因此输出browsr中会有多个图。

我之前在R中使用gviz来绘制它们，但是现在，我需要在html中执行它。我之前从未使用过这个，我很欣赏这方面的任何帮助。

由于

Answer 1

使用合适的编程语言为您生成HTML

您可以生成类似于以下方法的html输出：

＆＃13;

＆＃13;

.canvas {
  margin: 50px;
}
.region {
  position: relative;
  margin-top:  50px;
  margin-left: 50px;
  width: 400px;
  border: 1px solid black;
  height: 10px;
}
.region::before, .region::after {
  color: #00000;
  position: absolute;
  top: -5px;
  font-family: Arial;
  font-size: 1.2em;
 }
.region::before {
  content: "1";
  left: -20px;
}
.region::after {
  content: "110";
  left: 420px;
 }

.v-1, .v-2 {
  position: absolute;
  width:  60px;
  height: 40px;
  background-color: rgba(255, 0, 0, .8);
  margin-top: -20px;
}
.v-1 {
  margin-left: 120px;
}

.v-2 {
  margin-left: 260px;
}


.v-1 > div, .v-2 > div {
  position: relative;
  margin-top: -20px;
  widht: 100%;
  text-align: center;
  font-family: Arial;
  font-size: .9em;
 }

＆＃13;

<div id="canvas">
  <div class="region">
    <div class="v-1"><div>30-45</div></div>
    <div class="v-2"><div>65-80</div></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用Javascript读取文件并绘制图表

否则，如果javascript是您的选项，您可以使用以下代码创建一个简单的html文件来读取文件内容：

＆＃13;

＆＃13;

<input type="file" id="fileinput" />
<script type="text/javascript">
  function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 

    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
	      var contents = e.target.result;
          alert(contents);  
      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

  document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>

＆＃13;

＆＃13;

＆＃13;

contents变量将保留所选文件的文本内容。您可以使用带有javascript的正则表达式在:之后提取范围或单个值。 然后，您可以使用这些值并利用html5的新绘图功能来相应地生成图形。

对于使用javascript的正则表达式，谷歌搜索会有很多指南。有关新canvas html5元素的阅读以及如何使用javascript进行绘制，我发现了这个画布教程 - https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial - 一个很好的起点。