Wie man Diagramm in jeder Zelle dynamisch anzeigt?

Question

Dynamisch muss ID jedes Mal generiert werden. Ich tat, aber ich legte harte Codedaten. immer wieder rufe ich diesen Code mit anderen ID, ich möchte mit Schleife zu tun, so dass jeder Vorschlag?

Können Sie mir vorschlagen, wie Sie oder eine andere Methode?

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

So etwas ??

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