Google 图表标签未出现在多个图表上

Question

我有动态渲染的谷歌图表，其中有 1 个数据源对象数组，可以重新创建为多个数组形式。我生成 2 个模型图表，每个模型对应每个分支并动态生成 HTML 对象。

2 个模型图表显示良好，但标签仅显示在每个分支的最后一个模型上。我已经切换了模型的顺序，但再次只出现在最后一个模型上，总是其中之一。也没有发生错误。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button class="btn btn-primary" id="show">Show</button>
<div id="mainView"></div>

<script>
     
google.charts.load('current', {'packages':['corechart']});
const show = document.getElementById("show");
const mainView = document.getElementById("mainView");
let chart1Arr = [];
let chart2Arr = [];
let sourceArr = [ 
  {
    BranchId: 1,
    Branch: 'New York',
    Week: [ 
      { Weeknumber: 1, PaymentBrutto: 500, Tax: 5, PaymentNetto: 495 },
      { Weeknumber: 2, PaymentBrutto: 400, Tax: 4, PaymentNetto: 396 },
      { Weeknumber: 3, PaymentBrutto: 300, Tax: 3, PaymentNetto: 397 }
    ]
  },
  {
    BranchId: 2,
    Branch: 'Washington',
    Week: [ 
      { Weeknumber: 1, PaymentBrutto: 400, Tax: 4, PaymentNetto: 396 },
      { Weeknumber: 2, PaymentBrutto: 300, Tax: 3, PaymentNetto: 397 },
      { Weeknumber: 3, PaymentBrutto: 500, Tax: 5, PaymentNetto: 495 }
    ]
  }
];

function renderCharts() {
    let i = 1;
    let newDiv = '';

    sourceArr.forEach(branch => {
        newDiv += `<div id="rowBranch${branch.BranchId}">
                        <div id="galeryChart${branch.BranchId}">
                                <p>${branch.Branch}</p>
                            </div>
                        </div>
                   </div>`;
    });
    mainView.innerHTML = newDiv;

    newDiv = '';
    sourceArr.forEach(branch => { // Tax Every Week
        chart1Arr = [];
        chart1Arr.push(['Calendar Week', 'Tax']);
        branch.Week.forEach(week => {
            chart1Arr.push([week.Weeknumber, week.Tax]);
        });  

        let divContainer = document.getElementById("galeryChart" + branch.BranchId);
        divContainer.innerHTML += `<div id="chart1${i}"></div>`;

        let data = google.visualization.arrayToDataTable(chart1Arr);
        let options = {
            title : 'Tax Every Week ',
            vAxis: {title: 'Amount'},
            hAxis: {title: 'Calendar Week'},
            seriesType: 'bars',
            width: 300,
            height: 200,
            series: {1: {type: 'line'}},
            legend : {position: 'bottom'}
        };      

        let chart = new google.visualization.ComboChart(document.getElementById('chart1' + i));
        chart.draw(data, options);
        i++;
    });

    newDiv = '';
    sourceArr.forEach(branch => { // Payment Every Week
        chart2Arr = [];
        chart2Arr.push(['Calendar Week', 'Brutto', 'Netto']);
        branch.Week.forEach(week => {
            chart2Arr.push([week.Weeknumber, week.PaymentBrutto, week.PaymentNetto]);
        });  

        let divContainer = document.getElementById("galeryChart" + branch.BranchId);
        divContainer.innerHTML += `<div id="chart2${i}"></div>`;

        let data = google.visualization.arrayToDataTable(chart2Arr);
        let options = {
            title : 'Brutto - Netto Payment',
            vAxis: {title: 'Amount'},
            hAxis: {title: 'Calendar Week'},
            seriesType: 'bars',
            width: 300,
            height: 200,
            legend : {position: 'bottom'}
        };      

        let chart = new google.visualization.ComboChart(document.getElementById('chart2' + i));
        chart.draw(data, options);
        i++;
    });
}

show.addEventListener('click', event => { google.charts.setOnLoadCallback(renderCharts); });
</script>

Answer 1

显然我必须将 HTML 插入与图表循环分开。

     
google.charts.load('current', {'packages':['corechart']});
const show = document.getElementById("show");
const mainView = document.getElementById("mainView");
let chart1Arr = [];
let chart2Arr = [];
let sourceArr = [ 
  {
    BranchId: 1,
    Branch: 'New York',
    Week: [ 
      { Weeknumber: 1, PaymentBrutto: 500, Tax: 5, PaymentNetto: 495 },
      { Weeknumber: 2, PaymentBrutto: 400, Tax: 4, PaymentNetto: 396 },
      { Weeknumber: 3, PaymentBrutto: 300, Tax: 3, PaymentNetto: 397 }
    ]
  },
  {
    BranchId: 2,
    Branch: 'Washington',
    Week: [ 
      { Weeknumber: 1, PaymentBrutto: 400, Tax: 4, PaymentNetto: 396 },
      { Weeknumber: 2, PaymentBrutto: 300, Tax: 3, PaymentNetto: 397 },
      { Weeknumber: 3, PaymentBrutto: 500, Tax: 5, PaymentNetto: 495 }
    ]
  }
];

function renderCharts() {
    let i = 1;
    let newDiv = '';

    sourceArr.forEach(branch => {
        newDiv += `<div id="rowBranch${branch.BranchId}">
                        <div id="galeryChart${branch.BranchId}">
                                <p>${branch.Branch}</p>
                            </div>
                            <div id="chart1${branch.BranchId}"></div>
                            <div id="chart2${branch.BranchId}"></div>
                        </div>
                   </div>`;
    });
    mainView.innerHTML = newDiv;

    newDiv = '';
    sourceArr.forEach(branch => { // Tax Every Week
        chart1Arr = [];
        chart1Arr.push(['Calendar Week', 'Tax']);
        branch.Week.forEach(week => {
            chart1Arr.push([week.Weeknumber, week.Tax]);
        });  

        let data = google.visualization.arrayToDataTable(chart1Arr);
        let options = {
            title : 'Tax Every Week ',
            vAxis: {title: 'Amount'},
            hAxis: {title: 'Calendar Week'},
            seriesType: 'bars',
            width: 300,
            height: 200,
            series: {1: {type: 'line'}},
            legend : {position: 'bottom'}
        };      

        let chart = new google.visualization.ComboChart(document.getElementById('chart1' + branch.BranchId));
        chart.draw(data, options);
        i++;
    });

    newDiv = '';
    sourceArr.forEach(branch => { // Payment Every Week
        chart2Arr = [];
        chart2Arr.push(['Calendar Week', 'Brutto', 'Netto']);
        branch.Week.forEach(week => {
            chart2Arr.push([week.Weeknumber, week.PaymentBrutto, week.PaymentNetto]);
        }); 

        let data = google.visualization.arrayToDataTable(chart2Arr);
        let options = {
            title : 'Brutto - Netto Payment',
            vAxis: {title: 'Amount'},
            hAxis: {title: 'Calendar Week'},
            seriesType: 'bars',
            width: 300,
            height: 200,
            legend : {position: 'bottom'}
        };      

        let chart = new google.visualization.ComboChart(document.getElementById('chart2' + branch.BranchId));
        chart.draw(data, options);
        i++;
    });
}

show.addEventListener('click', event => { google.charts.setOnLoadCallback(renderCharts); });

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button class="btn btn-primary" id="show">Show</button>
<div id="mainView"></div>