Question

创建一个四分位的烛台图表，用于合唱青蛙活动。试图弄清楚如何将实际数据点添加到图表中（使其成为组合图表）。

以下是烛台图表的代码：

<!DOCTYPE html>
<html lang="en">
<head><title>
	KHA
</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
<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(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['American Bullfrog (394)', 69, 137, 176, 225],
['American Toad (479)', 71, 99, 146, 187],
['Blanchards Cricket Frog (1476)', 78, 121, 168, 210],
['Boreal Chorus Frog (2410)', 55, 93, 160, 242],
['Chihuahuan Green Toad (24)', 124, 159, 188, 228],
['Crawfish Frog (212)', 67, 83, 111, 187],
['E. Narrow-mouthed Toad (32)', 142, 153, 200, 201],
['Gray Treefrog complex (721)', 74, 118, 169, 202],
['Great Plains Toad (212)', 85, 130, 174, 242],
['Plains Leopard Frog (638)', 70, 103, 163, 242],
['Plains Spadefoot (165)', 85, 129, 177, 225],
['Red-spotted Toad (9)', 154, 154, 165, 165],
['Southern Leopard Frog (344)', 55, 84, 144, 200],
['Spotted Chorus Frog (163)', 80, 111, 153, 239],
['Spring Peeper (116)', 41, 63, 102, 146],
['Streckers Chorus Frog (100)', 57, 84, 110, 149],
['W. Narrow-mouthed Toad (87)', 96, 151, 178, 211],
['Woodhouses Toad (553)', 83, 125, 173, 243],

// Hope it works.
], true);

var options = {
legend: 'none',
orientation: 'vertical',
hAxis: { ticks: [{v:0, f:'Jan'},{v:31, f:'Feb'},{v:59, f:'Mar'},{v:90, f:'Apr'},{v:120, f:'May'},{v:151, f:'Jun'},{v:181, f:'Jul'},{v:212, f:'Aug'},{v:243, f:'Sep'},{v:273, f:'Oct'},{v:304, f:'Nov'},{v:334, f:'Dec'},{v:365, f:'|'}], textStyle: {fontSize: 13}},
vAxis: { textStyle: {fontSize: 13}},
chartArea:{top:10, height:580}
};

var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

chart.draw(data, options);
}
 </script>

</head>
<body>   
        <div class="container-fluid">
          <div class="container">  
     <div id="chart_div" style="width: 1200px; height: 620px;"></div>
          </div>
        </div>
</body>
</html>

我想在每个相关的烛台图表上添加基础数据（带有红点的散点图）。这样用户可以更好地可视化数据的传播，并最终识别异常值。

以下是前三个烛台图表的基础数据。 [69,78,87,91,102,109,111,112,117,118,120,126,129,131,132,134,135,136,137,138,139,140,141,142,143 ，144,145,146,147,148,149,150,151,152,153,155,156,157,159,160,161,162,164,165,166,167,168,169,170,171 ，172,173,174,175,176,177,178,179,180,181,182,183,184,190,198,200,203,204,207,208,212,216,225]

[71,72,74,78,80,82,83,84,85,87,88,89,90,91,95,96,97,99,100,101,102,103,104， 105,108,109,110,111,112,113,114,115,116,117,118,119,120,121,123,125,127,130,131,132,133,135,137,138， 140,142,143,144,146,147,149,151,152,159,161,163,164,165,168,171,172,173,175,178,181,187]

[78,88,90,94,95,96,102,103,105,106,108,109,110,111,112,113,114,115,116,117,118,119,120， 121,122,123,124,125,126,127,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146， 147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171， 172,173,174,175,176,177,178,179,180,181,182,183,187,198,199,200,201,206,207,210]

感谢您的帮助。

特拉维斯

Answer 1

这就是我想出的......

为每个散点图数据表添加一个新列...

var scatterSeries = [
  [69, 78, 87, 91, 102, 109, 111, 112, 117, 118, 120, 126, 129, 131, 132, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 155, 156, 157, 159, 160, 161, 162, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 190, 198, 200, 203, 204, 207, 208, 212, 216, 225],
  [71, 72, 74, 78, 80, 82, 83, 84, 85, 87, 88, 89, 90, 91, 95, 96, 97, 99, 100, 101, 102, 103, 104, 105, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 125, 127, 130, 131, 132, 133, 135, 137, 138, 140, 142, 143, 144, 146, 147, 149, 151, 152, 159, 161, 163, 164, 165, 168, 171, 172, 173, 175, 178, 181, 187],
  [78, 88, 90, 94, 95, 96, 102, 103, 105, 106, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 187, 198, 199, 200, 201, 206, 207, 210]
];

for (var i = 0; i < data.getNumberOfRows(); i++) {
  if (scatterSeries.length > i) {
    scatterSeries[i].forEach(function (y, index) {
      var colIndex = data.addColumn('number', 'Scatter ' + index);
      data.setValue(i, colIndex, y);
      addSeries(data.getNumberOfColumns() - 5);
    });
  }
}

为每个新列添加一个系列选项...

function addSeries(index) {
  options.series[index] = {type: 'scatter', pointSize: 1};
}

默认情况下，图表会以不同的方式为每个系列着色，
要为所有人使用相同的颜色，请为每个新系列列添加'style'列这可以使用数据视图来完成......

var viewColumns = [];
for (var col = 0; col < data.getNumberOfColumns(); col++) {
  viewColumns.push(col);
  if (data.getColumnLabel(col).indexOf('Scatter') > -1) {
    viewColumns.push({
      type: 'string',
      role: 'style',
      calc: function (dt, row) {
        return 'red';
      }
    });
  }
}
var view = new google.visualization.DataView(data);
view.setColumns(viewColumns);

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['American Bullfrog (394)', 69, 137, 176, 225],
    ['American Toad (479)', 71, 99, 146, 187],
    ['Blanchards Cricket Frog (1476)', 78, 121, 168, 210],
    ['Boreal Chorus Frog (2410)', 55, 93, 160, 242],
    ['Chihuahuan Green Toad (24)', 124, 159, 188, 228],
    ['Crawfish Frog (212)', 67, 83, 111, 187],
    ['E. Narrow-mouthed Toad (32)', 142, 153, 200, 201],
    ['Gray Treefrog complex (721)', 74, 118, 169, 202],
    ['Great Plains Toad (212)', 85, 130, 174, 242],
    ['Plains Leopard Frog (638)', 70, 103, 163, 242],
    ['Plains Spadefoot (165)', 85, 129, 177, 225],
    ['Red-spotted Toad (9)', 154, 154, 165, 165],
    ['Southern Leopard Frog (344)', 55, 84, 144, 200],
    ['Spotted Chorus Frog (163)', 80, 111, 153, 239],
    ['Spring Peeper (116)', 41, 63, 102, 146],
    ['Streckers Chorus Frog (100)', 57, 84, 110, 149],
    ['W. Narrow-mouthed Toad (87)', 96, 151, 178, 211],
    ['Woodhouses Toad (553)', 83, 125, 173, 243],
  ], true);

  var options = {
    legend: 'none',
    orientation: 'vertical',
    hAxis: { ticks: [{v:0, f:'Jan'},{v:31, f:'Feb'},{v:59, f:'Mar'},{v:90, f:'Apr'},{v:120, f:'May'},{v:151, f:'Jun'},{v:181, f:'Jul'},{v:212, f:'Aug'},{v:243, f:'Sep'},{v:273, f:'Oct'},{v:304, f:'Nov'},{v:334, f:'Dec'},{v:365, f:'|'}], textStyle: {fontSize: 13}},
    vAxis: { textStyle: {fontSize: 13}},
    chartArea:{bottom: 24, top: 10, height: '100%'},
    series: {}
  };

  var scatterSeries = [
    [69, 78, 87, 91, 102, 109, 111, 112, 117, 118, 120, 126, 129, 131, 132, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 155, 156, 157, 159, 160, 161, 162, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 190, 198, 200, 203, 204, 207, 208, 212, 216, 225],
    [71, 72, 74, 78, 80, 82, 83, 84, 85, 87, 88, 89, 90, 91, 95, 96, 97, 99, 100, 101, 102, 103, 104, 105, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, 125, 127, 130, 131, 132, 133, 135, 137, 138, 140, 142, 143, 144, 146, 147, 149, 151, 152, 159, 161, 163, 164, 165, 168, 171, 172, 173, 175, 178, 181, 187],
    [78, 88, 90, 94, 95, 96, 102, 103, 105, 106, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 187, 198, 199, 200, 201, 206, 207, 210]
  ];

  for (var i = 0; i < data.getNumberOfRows(); i++) {
    if (scatterSeries.length > i) {
      scatterSeries[i].forEach(function (y, index) {
        var colIndex = data.addColumn('number', 'Scatter ' + index);
        data.setValue(i, colIndex, y);
        addSeries(data.getNumberOfColumns() - 5);
      });
    }
  }

  var viewColumns = [];
  for (var col = 0; col < data.getNumberOfColumns(); col++) {
    viewColumns.push(col);
    if (data.getColumnLabel(col).indexOf('Scatter') > -1) {
      viewColumns.push({
        type: 'string',
        role: 'style',
        calc: function (dt, row) {
          return 'red';
        }
      });
    }
  }
  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  function addSeries(index) {
    options.series[index] = {type: 'scatter', pointSize: 1};
  }

  var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
  chart.draw(view, options);

  window.addEventListener('resize', function () {
    chart.draw(view, options);
  }, false);
}

＆＃13;

html, body {
  height: 100%;
}

#chart_div {
  height: 100%;
}

＆＃13;

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

＆＃13;

Google图表：在烛台图表中添加点数

1 个答案: