Question

我在php项目上使用融合图。我想在单击按钮时在弹出消息或警报中显示图形。问题在于所有数据都是动态的，必须显示几种类型的图形。我可以在不同页面中显示所有图形，但是我想在同一窗口中将所有图形显示为警报消息或弹出消息。

如何使用同一窗口中的弹出消息在融合图中显示动态多个数据。

Answer 1

您可以在模式弹出框内显示FusionCharts，只需将其与具有renderAt值的FusionCharts映射到模式框的div容器，请检查以下javascript中的示例

<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">FusionCharts in modal box</h4>
      </div>
      <div class="modal-body">
        <div id="chart-container">
        Chart will render here....
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


 jQuery(document).ready(function(e) {
FusionCharts.ready(function() {
  var salesChart = new FusionCharts({
      type: 'column2d',
      renderAt: 'chart-container',
      width: '100%',
      height: '400',
      dataFormat: 'json',
      dataSource: {
        "chart": {
          "caption": "Sales of Liquor",
          "subCaption": "Last week",
          "xAxisName": "Day",
          "yAxisName": "Sales (In USD)",
          "numberPrefix": "$"
        },

        "data": [{
            "label": "Mon",
            "value": "4123"
          },
          {
            "label": "Tue",
            "value": "4633"
          },
          {
            "label": "Wed",
            "value": "5507"
          },
          {
            "label": "Thu",
            "value": "4910"
          },
          {
            "label": "Fri",
            "value": "5529"
          },
          {
            "label": "Sat",
            "value": "5803"
          },
          {
            "label": "Sun",
            "value": "6202"
          }
        ]
      }
    })
    .render();
});
    jQuery('#mymodal').trigger('click');
});

示例链接-http://jsfiddle.net/1aeur58f/6188/

如何使用同一窗口中的弹出消息在FusionChart中显示动态多个数据？

1 个答案: