如何使用highcharts构建响应式温度计面板

Question

嘿我正在尝试使用highcharts构建温度计面板。 我构建它的方式：构建几个温度计，一个温度计（实际上是一个柱形图，在图表的末尾有一个圆形图）。

温度计是工厂服务，我调用该服务的函数生成图表以生成温度计图。

到目前为止，我已经成功完成了上述任务，但即使在笔记本电脑或平板电脑中，我的组件也没有响应。

我正在使用bootstrap，我正在考虑转而使用flexbox，我需要一个指导，以了解响应问题的来源以及如何解决它。

修改 我认为解决这个问题的最佳方法是将温度计面板单元化为一个图形而不是4个单独的图形，问题是：我该怎么做？

这是我的代码：

我的代码的代码：http://codepen.io/Barak/pen/JRdRXv

＆＃13;

＆＃13;

var app = angular.module("app",[]);

app.controller("mainCtrl", ["$scope","thermometer",function($scope,thermometer){
  $scope.title = "Hello World";
    var chartThermo1        = thermometer.generateChart("thermometer1","A00");
    var chartThermo2        = thermometer.generateChart("thermometer2","B03");
    var chartThermo3        = thermometer.generateChart("thermometer3","C04");
    var chartThermo4        = thermometer.generateChart("thermometer4", "TO");
                           
}])

app.factory('thermometer', function () {
        var thermometer = {};
        thermometer.generateChart = function (containerId,title) {
            var chart = new Highcharts.Chart({
                chart: {
                    marginBottom: 50,
                    renderTo: containerId
                },
                series: [{
                    data: [70],
                    type: 'column',
                    pointWidth: 20,
                    threshold: -40,
                    borderWidth: 0,
                    name: 'Temp'
                }],
                credits: {
                    enabled: false
                },
                legend: {
                    enabled: false
                },
                xAxis: {
                    labels: {
                        enabled: false
                    },
                    lineWidth: 0,
                    tickWidth: 0
                },
                yAxis: {
                    min: 0,
                    max: 150,
                    minPadding: 0,
                    maxPadding: 0,
                    startOnTick: false,
                    endOnTick: false,
                    title: {
                        text: ''
                    },
                    tickInterval: 75,
                    minorTickInterval: 1,
                    gridLineWidth: 0,
                    minorGridLineWidth: 0,
                    tickWidth: 1,
                    minorTickWidth: 1
                },
                title: {
                    text: title
                }

            }, function (chart) {
                // Draw the shape
                var series = chart.series[0],
                    point = series.points[0],
                    radius = 20;
                chart.renderer.circle(
                    chart.plotLeft + point.shapeArgs.x + (point.shapeArgs.width / 2),
                    chart.plotTop + series.yAxis.len + radius - 5,
                    20
                )
                .attr({
                    fill: series.color
                })
                .add();
            });
            return chart;
        }
        return thermometer;

    });

＆＃13;

.thermometer{
    display: inline-block;
    height: 280px;
    width: 80px;
    margin: 1em auto;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.6/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl"> 
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3 col-md-3">
         <div id="thermometer1" class="thermometer flex-item"></div>
         <div id="thermometer2" class="thermometer flex-item"></div>
         <div id="thermometer3" class="thermometer flex-item"></div>
         <div id="thermometer4" class="thermometer flex-item"></div>
      </div>
    </div>  
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;