График дерева Echarts не отображается в Chrome и Safari - PullRequest
Новая
       19

График дерева Echarts не отображается в Chrome и Safari

0 голосов
/ 03 ноября 2018

Я пытаюсь создать дерево на echarts. Дерево отлично загружается в Firefox. Код JS для генерации дерева выглядит следующим образом: 

        var blastResults = JSON.parse(result);
        console.log(JSON.stringify(blastResults, null, 2));

        var blastResultsDiv = document.getElementById("blastResults");
        for (var i = 0; i < blastResults.length; i++) {
            var description = document.createElement("p");
            description.className = "h5";
            description.innerHTML = blastResults[i].description;
            blastResultsDiv.appendChild(description);

            var chart = document.createElement("div");
            chart.className = "chart";
            var resultChart = echarts.init(chart);
            var data = blastResults[i].tree;

            resultChart.setOption(option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',

                        data: [data],

                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '20%',

                        symbolSize: 7,
                        initialTreeDepth: 9,

                        label: {
                            normal: {
                                position: 'left',
                                verticalAlign: 'middle',
                                align: 'right',
                                fontSize: 9
                            }
                        },

                        leaves: {
                            label: {
                                normal: {
                                    position: 'right',
                                    verticalAlign: 'middle',
                                    align: 'left'
                                }
                            }
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            });
            blastResultsDiv.appendChild(chart);

Пример результата JSON для генерации графа выглядит следующим образом:

[{ "дерево": { "дети": [{ "дети": [{ "дети": [{ "дети": [{ "дети": [{ "дети": [{ "Имя": "Escherichia coli"}, {"name": "Escherichia sp. MOD1-EC6300"}], "name": "Escherichia"}, {"children": [{"name": "Shigella boydii"}, {" name ":" Shigella sonnei "}, {" name ":" Shigella dysenteriae "}, {" name ":" Shigella flexneri "}]," name ":" Shigella "}, {" children ": [{" name ":" Salmonella enterica "}]," name ":" Salmonella "}]," name ":" Enterobacteriaceae "}]," name ":" Enterobacterales "}]," name ":" Gammaproteobacteria "}]," name ":" Proteobacteria "}]," name ":" Bacteria "}," description ":" Рецептор бактериофага N4, субъединица наружной мембраны [Escherichia coli str. K-12 substr. MG1655] "}, {" tree ": {"children": [{"children": [{"children": [{"children": [{"children": [{"children": [{"name": "Escherichia coli"}], "name ":" Escherichia "}, {" children ": [{" name ":" Shigella sonnei "}]," name ":" Shigella "}, {" children ": [{" name ":" Kluyvera intermedia "} ], "name": "Kluyvera"}, {"children": [{"name": "Citrobacter sedlakii"}], "name": "Citrobacter"}], "name": "Enterobacteriaceae "}, {" children ": [{" name ":" Phytobacter ursingii "}]," name ":" Phytobacter "}]," name ":" Enterobacterales "}]," name ":" Gammaproteobacteria "}] , "name": "Proteobacteria"}], "name": "Bacteria"}, "description": "токсичный мембранный белок [Escherichia coli str. К-12 субстр. 1655] "}, {" дерево ": {" дети ": [{" дети ": [{" дети ": [{" дети ": [{" дети ": [{" дети ": [{" имя» : "Escherichia coli"}], "name": "Escherichia"}], "name": "Enterobacteriaceae"}], "name": "Enterobacterales"}], "name": "Gammaproteobacteria"}], "name ":" Proteobacteria "}]," name ":" Bacteria "}," description ":" лидерный пептид оперона [Escherichia coli str. К-12 субстр. 1655] "}]

Пожалуйста, дайте мне знать, если потребуется дополнительная информация. Заранее спасибо.

1 Ответ

0 голосов
/ 05 ноября 2018

Попробуйте сначала добавить DOM, затем echarts.init(DOM)

Потому что, если DOM на самом деле не рендерится, clientWidth, clientHeight этого DOM равны 0, которые можно использовать для инициализации холста с помощью echarts.

проверьте это демо: 

         var result = '[{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"},{"name":"Escherichia sp. MOD1-EC6300"}],"name":"Escherichia"},{"children":[{"name":"Shigella boydii"},{"name":"Shigella sonnei"},{"name":"Shigella dysenteriae"},{"name":"Shigella flexneri"}],"name":"Shigella"},{"children":[{"name":"Salmonella enterica"}],"name":"Salmonella"}],"name":"Enterobacteriaceae"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" bacteriophage N4 receptor, outer membrane subunit [Escherichia coli str. K-12 substr. MG1655]"},{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"}],"name":"Escherichia"},{"children":[{"name":"Shigella sonnei"}],"name":"Shigella"},{"children":[{"name":"Kluyvera intermedia"}],"name":"Kluyvera"},{"children":[{"name":"Citrobacter sedlakii"}],"name":"Citrobacter"}],"name":"Enterobacteriaceae"},{"children":[{"name":"Phytobacter ursingii"}],"name":"Phytobacter"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" toxic membrane protein [Escherichia coli str. K-12 substr. MG1655]"},{"tree":{"children":[{"children":[{"children":[{"children":[{"children":[{"children":[{"name":"Escherichia coli"}],"name":"Escherichia"}],"name":"Enterobacteriaceae"}],"name":"Enterobacterales"}],"name":"Gammaproteobacteria"}],"name":"Proteobacteria"}],"name":"Bacteria"},"description":" thr operon leader peptide [Escherichia coli str. K-12 substr. MG1655]"}]' ;

    var blastResults = JSON.parse(result);
    var blastResultsDiv = document.querySelector('#blastResultsDiv');
   
    for (var i = 0; i < blastResults.length; i++) {
        var description = document.createElement("p");
        description.className = "h5";
        description.innerHTML = blastResults[i].description;
      	blastResultsDiv.appendChild(description);

        var chart = document.createElement("div");
        chart.className = "chart";
        blastResultsDiv.appendChild(chart);
        var resultChart = echarts.init(chart);
        var data = blastResults[i].tree;
        let option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',

                    data: [data],

                    top: '1%',
                    left: '7%',
                    bottom: '1%',
                    right: '20%',

                    symbolSize: 7,
                    initialTreeDepth: 9,

                    label: {
                        normal: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 9
                        }
                    },

                    leaves: {
                        label: {
                            normal: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        }
                    },

                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
        };
        
        resultChart.setOption(option);
         
 }
.chart {
  width: 100%;
  height: 200px;
}
<html>
      <header>
        <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id="blastResultsDiv" ></div>
      </body>
    </html>
...