如何在每个单元格中动态显示图表？

debugcn 发表于 Dev

ja那教

动态地需要每次生成id。我做到了，但是我输入了硬代码数据。我一次又一次使用不同的id调用此代码，我想使用循环，所以有什么建议吗？

你能建议我怎么做或其他方法吗？

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>

普加兹

这样的东西??

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。