javascript 在脚本中硬编码统计数据时，在Google Visualization中绘制箱线图

我尝试在Google图表中创建一个箱线图，官方文档（见页面底部）用于加载实际的数据集并在JavaScript中计算统计数据;然而，我计划在其他地方计算统计数据（iidoEmin，max，quartiles，median）并将其读入。
我尝试过创建一个DataTable并直接输入我的统计数据（将下面的代码片段与上面的链接文档进行比较）。虽然我可以得到表，而且它看起来很好，但箱线图中没有呈现任何内容。
我能想到的唯一一件事是，在使用arrayToDataTable时，ID丢失了，因此chart无法获得正确的元素。

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawBoxPlot);
google.charts.load('current', {
  'packages': ['table']
});
google.charts.setOnLoadCallback(drawTable);

function drawBoxPlot() {

  var data = google.visualization.arrayToDataTable(
    [
      [{
          label: 'Var',
          type: 'string'
        },
        {
          label: 'Max',
          id: 'max',
          type: 'number',
          role: 'interval'
        },
        {
          label: 'Min',
          id: 'min',
          type: 'number',
          role: 'interval'
        },
        {
          label: '1st Q',
          id: 'firstQuartile',
          type: 'number',
          role: 'interval'
        },
        {
          label: 'Median',
          id: 'median',
          type: 'number',
          role: 'interval'
        },
        {
          label: '3rd Q',
          id: 'thirdQuartile',
          type: 'number',
          role: 'interval'
        }
      ],
      ['A', 120, 85, 93, 100, 107],
      ['B', 140, 90, 104, 120, 127],
      ['C', 140, 100, 111, 130, 136],
      ['D', 95, 85, 86.5, 90, 93.5],
      ['E', 120, 85, 93, 100, 107],
      ['F', 140, 90, 104, 120, 127],
      ['G', 140, 100, 111, 130, 136],
      ['H', 95, 85, 86.5, 90, 93.5],
      ['I', 120, 85, 93, 100, 107],
      ['J', 140, 90, 104, 120, 127],
      ['K', 140, 100, 111, 130, 136],
      ['L', 95, 85, 86.5, 90, 93.5]
    ]);



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

}

function drawTable() {

  var data = google.visualization.arrayToDataTable(
    [
      [{
          label: 'Var',
          type: 'string'
        },
        {
          label: 'Max',
          id: 'max',
          type: 'number',
          role: 'interval'
        },
        {
          label: 'Min',
          id: 'min',
          type: 'number',
          role: 'interval'
        },
        {
          label: '1st Q',
          id: 'firstQuartile',
          type: 'number',
          role: 'interval'
        },
        {
          label: 'Median',
          id: 'median',
          type: 'number',
          role: 'interval'
        },
        {
          label: '3rd Q',
          id: 'thirdQuartile',
          type: 'number',
          role: 'interval'
        }
      ],
      ['A', 120, 85, 93, 100, 107],
      ['B', 140, 90, 104, 120, 127],
      ['C', 140, 100, 111, 130, 136],
      ['D', 95, 85, 86.5, 90, 93.5],
      ['E', 120, 85, 93, 100, 107],
      ['F', 140, 90, 104, 120, 127],
      ['G', 140, 100, 111, 130, 136],
      ['H', 95, 85, 86.5, 90, 93.5],
      ['I', 120, 85, 93, 100, 107],
      ['J', 140, 90, 104, 120, 127],
      ['K', 140, 100, 111, 130, 136],
      ['L', 95, 85, 86.5, 90, 93.5]
    ]);



  var table = new google.visualization.Table(document.getElementById('table_div'));

  table.draw(data, {
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="box_plot"></div>

<div id="table_div"></div>

第一，你可以同时加载多个包，
只需要加载谷歌一次...

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  drawBoxPlot();
  drawTable();
});

其次，数据表缺少箱形图所需的所有系列列，
您只提供了数据角色/间隔。
注意在他们的例子中，有7个系列列，然后是间隔...

var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'series0');
  data.addColumn('number', 'series1');
  data.addColumn('number', 'series2');
  data.addColumn('number', 'series3');
  data.addColumn('number', 'series4');
  data.addColumn('number', 'series5');
  data.addColumn('number', 'series6');

  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'});

如果我们仔细观察，就会发现在绘制图表之前，他们使用函数getBoxPlotValues来格式化数组。

data.addRows(getBoxPlotValues(array));

所以他们从每个箱线图中垂直线的值开始...
这些是系列列的值。

var array = [
    ['a', 100, 90, 110, 85, 96, 104, 120],
    ['b', 120, 95, 130, 90, 113, 124, 140],
    ['c', 130, 105, 140, 100, 117, 133, 139],
    ['d', 90, 85, 95, 85, 88, 92, 95],
    ['e', 70, 74, 63, 67, 69, 70, 72],
    ['f', 30, 39, 22, 21, 28, 34, 40],
    ['g', 80, 77, 83, 70, 77, 85, 90],
    ['h', 100, 90, 110, 85, 95, 102, 110]
  ];

则它们使用getBoxPlotValues来添加数据角色/间隔的值。
以下是getBoxPlotValues返回的值数组

[
    ["a",100,90,110,85,96,104,120,120,85,93,100,107],
    ["b",120,95,130,90,113,124,140,140,90,104,120,127],
    ["c",130,105,140,100,117,133,139,140,100,111,130,136],
    ["d",90,85,95,85,88,92,95,95,85,86.5,90,93.5],
    ["e",70,74,63,67,69,70,72,74,63,68,70,71],
    ["f",30,39,22,21,28,34,40,40,21,25,30,36.5],
    ["g",80,77,83,70,77,85,90,90,70,77,80,84],
    ["h",100,90,110,85,95,102,110,110,85,92.5,100,106]
  ]

它是相同的序列值，间隔添加到每行的末尾。
如果你想直接输入你的值，你的数组需要和上面的类似。
参见以下工作代码段...

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function() {
  drawBoxPlot();
  drawTable();
});

function drawBoxPlot() {
  var data = google.visualization.arrayToDataTable(
    [
      [{
          label: 'Var',
          type: 'string'
        },
        {
          label: 'series0',
          type: 'number'
        },
        {
          label: 'series1',
          type: 'number'
        },
        {
          label: 'series2',
          type: 'number'
        },
        {
          label: 'series3',
          type: 'number'
        },
        {
          label: 'series4',
          type: 'number'
        },
        {
          label: 'series5',
          type: 'number'
        },
        {
          label: 'series6',
          type: 'number'
        },
        {
          label: 'Max',
          id: 'max',
          type: 'number',
          role: 'interval'
        },
        {
          label: 'Min',
          id: 'min',
          type: 'number',
          role: 'interval'
        },
        {
          label: '1st Q',
          id: 'firstQuartile',
          type: 'number',
          role: 'interval'
        },
        {
          label: 'Median',
          id: 'median',
          type: 'number',
          role: 'interval'
        },
        {
          label: '3rd Q',
          id: 'thirdQuartile',
          type: 'number',
          role: 'interval'
        }
      ],

      ["a", 100, 90, 110, 85, 96, 104, 120, 120, 85, 93, 100, 107],
      ["b", 120, 95, 130, 90, 113, 124, 140, 140, 90, 104, 120, 127],
      ["c", 130, 105, 140, 100, 117, 133, 139, 140, 100, 111, 130, 136],
      ["d", 90, 85, 95, 85, 88, 92, 95, 95, 85, 86.5, 90, 93.5],
      ["e", 70, 74, 63, 67, 69, 70, 72, 74, 63, 68, 70, 71],
      ["f", 30, 39, 22, 21, 28, 34, 40, 40, 21, 25, 30, 36.5],
      ["g", 80, 77, 83, 70, 77, 85, 90, 90, 70, 77, 80, 84],
      ["h", 100, 90, 110, 85, 95, 102, 110, 110, 85, 92.5, 100, 106]
    ]);

  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);
}

function drawTable() {

  var data = google.visualization.arrayToDataTable(
    [
      [{
          label: 'Var',
          type: 'string'
        },
        {
          label: 'Max',
          id: 'max',
          type: 'number',
        },
        {
          label: 'Min',
          id: 'min',
          type: 'number',
        },
        {
          label: '1st Q',
          id: 'firstQuartile',
          type: 'number',
        },
        {
          label: 'Median',
          id: 'median',
          type: 'number',
        },
        {
          label: '3rd Q',
          id: 'thirdQuartile',
          type: 'number',
        }
      ],
      ['A', 120, 85, 93, 100, 107],
      ['B', 140, 90, 104, 120, 127],
      ['C', 140, 100, 111, 130, 136],
      ['D', 95, 85, 86.5, 90, 93.5],
      ['E', 120, 85, 93, 100, 107],
      ['F', 140, 90, 104, 120, 127],
      ['G', 140, 100, 111, 130, 136],
      ['H', 95, 85, 86.5, 90, 93.5],
      ['I', 120, 85, 93, 100, 107],
      ['J', 140, 90, 104, 120, 127],
      ['K', 140, 100, 111, 130, 136],
      ['L', 95, 85, 86.5, 90, 93.5]
    ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));

  table.draw(data, {
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="box_plot"></div>
<div id="table_div"></div>

注意：表格图表不使用任何数据角色，
我将从那里使用的列中删除role: 'interval' ...

javascript 在脚本中硬编码统计数据时，在Google Visualization中绘制箱线图

1条答案

相关问题

热门标签

最新问答