Question

我想使用Google图表创建箱形图。

我尝试阅读https://developers.google.com/chart/image/docs/gallery/compound_charts#box_charts，但我不知道如何开始。

如何解决这个问题？

非常感谢您。

数据是

3866.98 1340.74 2071.56 2574.31 2469.57 1988.61 959.35 1619.34 1246 1063.86 1412.08 1352.95 732.72 840.74 1190.32 919.03 1158.07 1222.56 1008.82 726.73 638.32 1341.12 1429.38 1797.39 3174.39 2737.36 2034.05 854.34 1719.09 1387 1206.4 1777.8 2170.07 1027.43 1141.08 1418.48 1325.99 967.99 1424.78 674.72 676.18 713.47

和

3678.25 3587.91 5872.75 6092.34 4673.97 3552.83 1950.46 4237.72 3370.54 2987.67 3312.55 3160.13 1671.61 2393.07 3287.01 2392.64 2599.15 2518.06 2215.14 1565.59 1700.56 3922.74 3280.04 3616.88 5386.46 4624.65 3515.98 1617.95 4628.09 3868.39 3231.57 3957.05 4577.2 1941.77 2256.69 3307.08 3418.41 2117.63 3105.99 1460.15 1582.4 1706.43

Answer 1

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawBoxPlot);

    function drawBoxPlot() {

      var array = [
data_here
      ];

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'x');
      column_here

      data.addColumn({id:'max', type:'number', role:'interval'});
      data.addColumn({id:'min', type:'number', role:'interval'});
      data.addColumn({id:'firstQuartile', type:'number', role:'interval'});
      data.addColumn({id:'median', type:'number', role:'interval'});
      data.addColumn({id:'thirdQuartile', type:'number', role:'interval'});

      data.addRows(getBoxPlotValues(array));

      /**
       * Takes an array of input data and returns an
       * array of the input data with the box plot
       * interval data appended to each row.
       */
      function getBoxPlotValues(array) {

        var c = array[0].length;

        for (var i = 0; i < array.length; i++) {

          var arr = array[i].slice(1).sort(function (a, b) {
            return a - b;
          });

          var max = arr[arr.length - 1];
          var min = arr[0];

          array[i][c] = max;
          array[i][c+1] = min
          array[i][c+2] = Quartile(arr, 0.25);//firstQuartile;
          array[i][c+3] = Quartile(arr, 0.5);//median;
          array[i][c+4] = Quartile(arr, 0.75);//thirdQuartile;
        }
        return array;
      }

          function Quartile(data, q) {
  data=Array_Sort_Numbers(data);
  var pos = ((data.length) - 1) * q;
  var base = Math.floor(pos);
  var rest = pos - base;
  if( (data[base+1]!==undefined) ) {
    return data[base] + rest * (data[base+1] - data[base]);
  } else {
    return data[base];
  }
}

function Array_Sort_Numbers(inputarray){
  return inputarray.sort(function(a, b) {
    return a - b;
  });
}



      var options = {
          title:'Box Plot',
          height: 500,
          legend: {position: 'none'},
          hAxis: {
            gridlines: {color: '#fff'}
          },
          lineWidth: 0,
          series: [{'color': '#D3362D'}],
          intervals: {
            barWidth: 1,
            boxWidth: 1,
            lineWidth: 2,
            style: 'boxes'
          },
          interval: {
            max: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            },
            min: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            }
          }
      };

      var chart = new google.visualization.LineChart(document.getElementById('box_plot'));

      chart.draw(data, options);
    }

  </script>

如何在谷歌图表中创建箱形图？

1 个答案: