Как отображать динамическую диаграмму в каждой ячейке?

Question

Динамически нужно генерировать идентификатор каждый раз. Я сделал, но я поместил данные жесткого кода. снова и снова я вызываю этот код, используя другой идентификатор, я хочу использовать цикл, поэтому любое предложение?

Можете ли вы предложить мне, как это сделать или любой другой метод?

JS:

$(function() { 
    $('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: '' 
    }, 
    xAxis: { 
     //categories: ['Work Center 1'] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
     text: '' 
     } 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
     series: { 
     stacking: 'percent' 
     } 
    }, 
    series: [{ 
     name: 'Booked Order', 
     data: [5] 
    }, { 
     name: 'Urgent Order', 
     data: [2] 
    }, { 
     name: 'Available', 
     data: [3] 
    }] 
    }); 
}); 

HTML:

<tbody> 
    <tr> 
    <td>Month1</td> 
    <td> 
     <div id="container" style="width: 250px; height: 200px; margin: 0 auto"></div> 
    </td> 
    <td> 
     <div id="container1" style="width: 250px; height: 200px; margin: 0 auto; "></div> 
    </td> 
    <td> 
     <div id="container2" style="width: 250px; height: 200px; margin: 0 auto; "></div> 
    </td> 
    <td> 
     <div id="container3" style="width: 250px; height: 200px; margin: 0 auto; "></div> 
    </td> 
    <td> 
     <div id="container4" style="width: 250px; height: 200px; margin: 0 auto; "></div> 
    </td> 
    </tr> 
</tbody> 

Answer 1

Нечто подобное ??

$(function() { 
 
    var chartData = { 
 
    chart: { 
 
     type: 'bar' 
 
    }, 
 
    title: { 
 
     text: '' 
 
    }, 
 
    xAxis: { 
 
     //categories: ['Work Center 1'] 
 
    }, 
 
    yAxis: { 
 
     min: 0, 
 
     title: { 
 
     text: '' 
 
     } 
 
    }, 
 
    legend: { 
 
     reversed: true 
 
    }, 
 
    plotOptions: { 
 
     series: { 
 
     stacking: 'percent' 
 
     } 
 
    }, 
 
    series: [{ 
 
     name: 'Booked Order', 
 
     data: [5] 
 
    }, { 
 
     name: 'Urgent Order', 
 
     data: [2] 
 
    }, { 
 
     name: 'Available', 
 
     data: [3] 
 
    }] 
 
    }; 
 

 
    $('div[id^=container]').each(function() { 
 
    $(this).highcharts(chartData); 
 
    });; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.6/highcharts.js"></script> 
 
<tbody> 
 
    <tr> 
 
    <td>Month1</td> 
 
    <td> 
 
     <div id="container" style="width: 250px; height: 200px; margin: 0 auto"></div> 
 
    </td> 
 
    <td> 
 
     <div id="container1" style="width: 250px; height: 200px; margin: 0 auto; "></div> 
 
    </td> 
 
    <td> 
 
     <div id="container2" style="width: 250px; height: 200px; margin: 0 auto; "></div> 
 
    </td> 
 
    <td> 
 
     <div id="container3" style="width: 250px; height: 200px; margin: 0 auto; "></div> 
 
    </td> 
 
    <td> 
 
     <div id="container4" style="width: 250px; height: 200px; margin: 0 auto; "></div> 
 
    </td> 
 
    </tr> 
 
</tbody>