Canvas js图表在Bootstrap 3布局中没有正确响应(Canvas js Charts not responding correctly in Bootstrap 3 Layout)

我是UI开发人员，我正在使用Bootstrap 3和Canvas Js图表，如饼图，柱形图。我决定在桌面的每一行放置两个图表，并且它工作正常。但是当我调整浏览器窗口大小时，它不会在移动设备中堆叠两个图表。相反，饼图只消除了第二张图表的可见性。为什么会这样。

在桌面设备中

当我检查它的移动设备。饼图走了

代码在这里

<div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div id="pieChart"> <script type="text/javascript"> var pieChartValues=[ { y: 39.16,exploded: true, indexLabel: "Hello",color:"#1f77b4" }, { y: 21.8, indexLabel: "Hi",color:"#ff7f0e" }, { y: 21.45, indexLabel: "pk",color:" #ffbb78" }, { y: 5.56, indexLabel: "one",color:"#d62728"}, { y:5.38, indexLabel: "two",color:"#98df8a"}, { y: 3.73 , indexLabel: "three",color:"#bcbd22" }, { y: 2.92, indexLabel: "four",color:"#f7b6d2"} ]; renderPieChart(pieChartValues); function renderPieChart (values) { var chart = new CanvasJS.Chart("pieChart", { backgroundColor: "white", colorSet:"colorSet2", title:{ text: "Pie Chart", fontFamily:"Verdana", fontSize:25, fontWeight: "normal", }, animationEnabled: true, data: [ { indexLabelFontSize: 15, indexLabelFontFamily: "Monospace", indexLabelFontColor: "darkgrey", indexLabelLineColor: "darkgrey", indexLabelPlacement: "outside", type: "pie", showInLegend: false, toolTipContent: "<strong>#percent%</strong>", dataPoints:values } ] }); chart.render(); } </script> </div> </div> <div class="col-md-6"> <div id="columnChart"> <script type="text/javascript"> var columnChartValues=[ {y: 686.04, label: "one",color:"#1f77b4"}, {y: 381.84, label: "two",color:"#ff7f0e"}, {y: 375.76, label: "three",color:" #ffbb78"}, {y: 97.48, label: "four",color:"#d62728"}, {y: 94.2, label: "five",color:"#98df8a"}, {y: 65.28, label: "Hi",color:"#bcbd22"}, {y: 51.2, label: "Hello",color:"#f7b6d2"} ]; renderColumnChart(columnChartValues); function renderColumnChart(values) { var chart = new CanvasJS.Chart("columnChart", { backgroundColor: "white", colorSet:"colorSet3", title:{ text: "Column Chart", fontFamily: "Verdana", fontSize:25, fontWeight: "normal", }, animationEnabled: true, legend: { verticalAlign: "bottom", horizontalAlign: "center" }, theme: "theme2", data: [ { indexLabelFontSize: 15, indexLabelFontFamily: "Monospace", indexLabelFontColor: "darkgrey", indexLabelLineColor: "darkgrey", indexLabelPlacement: "outside", type: "column", showInLegend: false, legendMarkerColor: "grey", dataPoints: values } ] }); chart.render(); } </script> </div> </div> </div> </div>

I am UI Developer and I am using Bootstrap 3 and Canvas Js Charts like pie chart,column chart. I have decided to place two charts in each row for desktop.And It works properly. But when I resize the browser window It doesnot stack two charts in mobile device. Rather the Pie Chart gone away only second chart only visible. Why this happen.

In Desktop Device

When I check it for mobile device. The Pie Chart Gone Away

The code here

最满意答案

Bootstrap提供了网格类来维护响应性设计。要明确设置平板电脑或移动设备的宽度，您需要添加平板电脑和移动设备的网格类以及桌面类。

有关详细信息，请参阅Bootstrap-Grid 。这里有一个链接，可以参考台式机，平板电脑和移动设备等多种设备中的Bootstrap-Grid示例。

这是您的问题的工作代码。

var pieChartValues = [{
  y: 39.16,
  exploded: true,
  indexLabel: "Hello",
  color: "#1f77b4"
}, {
  y: 21.8,
  indexLabel: "Hi",
  color: "#ff7f0e"
}, {
  y: 21.45,
  indexLabel: "pk",
  color: " #ffbb78"
}, {
  y: 5.56,
  indexLabel: "one",
  color: "#d62728"
}, {
  y: 5.38,
  indexLabel: "two",
  color: "#98df8a"
}, {
  y: 3.73,
  indexLabel: "three",
  color: "#bcbd22"
}, {
  y: 2.92,
  indexLabel: "four",
  color: "#f7b6d2"
}];
renderPieChart(pieChartValues);

function renderPieChart(values) {

  var chart = new CanvasJS.Chart("pieChart", {
    backgroundColor: "white",
    colorSet: "colorSet2",

    title: {
      text: "Pie Chart",
      fontFamily: "Verdana",
      fontSize: 25,
      fontWeight: "normal",
    },
    animationEnabled: true,
    data: [{
      indexLabelFontSize: 15,
      indexLabelFontFamily: "Monospace",
      indexLabelFontColor: "darkgrey",
      indexLabelLineColor: "darkgrey",
      indexLabelPlacement: "outside",
      type: "pie",
      showInLegend: false,
      toolTipContent: "<strong>#percent%</strong>",
      dataPoints: values
    }]
  });
  chart.render();
}
var columnChartValues = [{
  y: 686.04,
  label: "one",
  color: "#1f77b4"
}, {
  y: 381.84,
  label: "two",
  color: "#ff7f0e"
}, {
  y: 375.76,
  label: "three",
  color: " #ffbb78"
}, {
  y: 97.48,
  label: "four",
  color: "#d62728"
}, {
  y: 94.2,
  label: "five",
  color: "#98df8a"
}, {
  y: 65.28,
  label: "Hi",
  color: "#bcbd22"
}, {
  y: 51.2,
  label: "Hello",
  color: "#f7b6d2"
}];
renderColumnChart(columnChartValues);

function renderColumnChart(values) {

  var chart = new CanvasJS.Chart("columnChart", {
    backgroundColor: "white",
    colorSet: "colorSet3",
    title: {
      text: "Column Chart",
      fontFamily: "Verdana",
      fontSize: 25,
      fontWeight: "normal",
    },
    animationEnabled: true,
    legend: {
      verticalAlign: "bottom",
      horizontalAlign: "center"
    },
    theme: "theme2",
    data: [

      {
        indexLabelFontSize: 15,
        indexLabelFontFamily: "Monospace",
        indexLabelFontColor: "darkgrey",
        indexLabelLineColor: "darkgrey",
        indexLabelPlacement: "outside",
        type: "column",
        showInLegend: false,
        legendMarkerColor: "grey",
        dataPoints: values
      }
    ]
  });

  chart.render();
} 
  <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div id="pieChart" style="height: 360px; width: 100%;">
            </div>
        </div>
        <div class="col-md-6">
            <div id="columnChart" style="height: 360px; width: 100%;">
            </div>
        </div>
    </div>
</div> 
  
 
Bootstrap provides grid-classes to maintain responsiveness design. To explicitly set width for tablet or mobile devices, you need to add grid-classes of tablet and mobile along with desktop class. 
Refer to Bootstrap-Grid for more info. And here is a link to refer to examples of Bootstrap-Grid in multiple devices like desktop, tablet and mobile devices.  
Here is the working code for your issue.  
 
  
  var pieChartValues = [{
  y: 39.16,
  exploded: true,
  indexLabel: "Hello",
  color: "#1f77b4"
}, {
  y: 21.8,
  indexLabel: "Hi",
  color: "#ff7f0e"
}, {
  y: 21.45,
  indexLabel: "pk",
  color: " #ffbb78"
}, {
  y: 5.56,
  indexLabel: "one",
  color: "#d62728"
}, {
  y: 5.38,
  indexLabel: "two",
  color: "#98df8a"
}, {
  y: 3.73,
  indexLabel: "three",
  color: "#bcbd22"
}, {
  y: 2.92,
  indexLabel: "four",
  color: "#f7b6d2"
}];
renderPieChart(pieChartValues);

function renderPieChart(values) {

  var chart = new CanvasJS.Chart("pieChart", {
    backgroundColor: "white",
    colorSet: "colorSet2",

    title: {
      text: "Pie Chart",
      fontFamily: "Verdana",
      fontSize: 25,
      fontWeight: "normal",
    },
    animationEnabled: true,
    data: [{
      indexLabelFontSize: 15,
      indexLabelFontFamily: "Monospace",
      indexLabelFontColor: "darkgrey",
      indexLabelLineColor: "darkgrey",
      indexLabelPlacement: "outside",
      type: "pie",
      showInLegend: false,
      toolTipContent: "<strong>#percent%</strong>",
      dataPoints: values
    }]
  });
  chart.render();
}
var columnChartValues = [{
  y: 686.04,
  label: "one",
  color: "#1f77b4"
}, {
  y: 381.84,
  label: "two",
  color: "#ff7f0e"
}, {
  y: 375.76,
  label: "three",
  color: " #ffbb78"
}, {
  y: 97.48,
  label: "four",
  color: "#d62728"
}, {
  y: 94.2,
  label: "five",
  color: "#98df8a"
}, {
  y: 65.28,
  label: "Hi",
  color: "#bcbd22"
}, {
  y: 51.2,
  label: "Hello",
  color: "#f7b6d2"
}];
renderColumnChart(columnChartValues);

function renderColumnChart(values) {

  var chart = new CanvasJS.Chart("columnChart", {
    backgroundColor: "white",
    colorSet: "colorSet3",
    title: {
      text: "Column Chart",
      fontFamily: "Verdana",
      fontSize: 25,
      fontWeight: "normal",
    },
    animationEnabled: true,
    legend: {
      verticalAlign: "bottom",
      horizontalAlign: "center"
    },
    theme: "theme2",
    data: [

      {
        indexLabelFontSize: 15,
        indexLabelFontFamily: "Monospace",
        indexLabelFontColor: "darkgrey",
        indexLabelLineColor: "darkgrey",
        indexLabelPlacement: "outside",
        type: "column",
        showInLegend: false,
        legendMarkerColor: "grey",
        dataPoints: values
      }
    ]
  });

  chart.render();
} 
  <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div id="pieChart" style="height: 360px; width: 100%;">
            </div>
        </div>
        <div class="col-md-6">
            <div id="columnChart" style="height: 360px; width: 100%;">
            </div>
        </div>
    </div>
</div>

更多推荐

chart,Chart,图表,color,电脑培训,计算机培训,IT培训"/> <meta name="descript