Как сгенерировать этот график в 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 
.. 

Как вы видите, каждый файл имеет несколько идентификаторов (я их опускаю ..), и для каждого идентификатора будет такой сюжет. Таким образом, в выходном браузере будет много графиков.

Я ранее использовал gviz в R для их построения, но теперь мне нужно сделать это в html. Я никогда не использовал это раньше, и я ценю любую помощь в этом отношении.

Благодаря

Answer 1

Используя подходящий язык программирования, который генерирует HTML для вас

Вы можете сгенерировать html результат, похожий на следующий подход:

.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; 
 
}

<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>

Использование Javascript для чтения файла и построить график

В противном случае, если Javascript вариант для вас, вы можете создать простой HTML-файл со следующим кодом для чтения содержимого файла:

<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) { 
 
\t  var contents = e.target.result; 
 
      alert(contents); 
 
     } 
 
     r.readAsText(f); 
 
    } else { 
 
     alert("Failed to load file"); 
 
    } 
 
    } 
 

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

переменная contents будет содержать текстовое содержимое подобранного файла. Вы можете извлечь диапазоны или одиночные значения после :, используя регулярные выражения с javascript. Затем вы можете использовать эти значения и использовать новые возможности рисования html5 для получения графика соответствующим образом.

Для регулярных выражений с javascript существует множество руководств в результате поиска в очках. Для чтения нового элемента canvas html5 и как рисовать с помощью javascript я нашел этот учебник по холсту - https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial - хорошая отправная точка.