时间戳

首页 > 解决方案 > 如何在谷歌图表中创建箱线图？

python - 如何在谷歌图表中创建箱线图？

问题描述

我想使用谷歌图表创建一个箱线图。

我试图阅读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

标签： pythongoogle-visualization

解决方案

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

推荐阅读