Google折线图无效

时间:2016-12-11 16:29:59

标签: javascript charts google-visualization linechart

以下代码将数据写入屏幕,这需要在图表中绘制。该图应类似于attachment因此,当计算数组指标时(第112行),它包含3个子数组:一个具有日期,一个具有标准化价格,另一个具有mRS值。阵列指示符也计算3次:一次用于AAL,一次用于ABF,一次用于ADM。所以我需要显示3个图表,每个符号一个。 所以基本上多线图代码需要集成到转置代码中,从而生成3个折线图,即在计算指标数组之后

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

var prices = [['Date', 'AAL', 'ABF', 'ADM'],
['2016-12-01', 1207.5, 2514.55, 1847.00],
['2016-11-01', 1123.5, 2475.00, 1901.00],
['2016-10-01', 1131, 2462.00, 1917.00],
['2016-09-01', 967.6, 2600.00, 2049.00],
['2016-08-01', 779.8, 3041, 2013.36],
['2016-07-01', 830.5, 2691, 2125.32],
['2016-06-01', 726.9, 2719, 1993.72],
['2016-05-02', 600.1, 2933.644, 1933.282],
['2016-04-01', 763.4, 3053.222, 1792.365],
['2016-03-01', 552.1, 3337.219, 1913.98],
['2016-02-01', 480.25, 3394.019, 1671.716],
['2016-01-04', 277.45, 3138.919, 1712.254],
['2015-12-01', 299.45, 3330.244, 1601.257],
['2015-11-02', 408.65, 3508.387, 1564.58],
['2015-10-01', 546.6, 3418.352, 1556.858],
['2015-09-01', 550.9, 3304.572, 1449.722],
['2015-08-03', 741, 3168.036, 1472.785],
['2015-07-01', 789.923, 3189.803, 1407.223],
['2015-06-01', 894.409, 2840.547, 1317.905],
['2015-05-01', 999.089, 2985.838, 1414.824],
['2015-04-01', 1076.017, 2817.219, 1458.897],
['2015-03-02', 985.457, 2778.762, 1432.678],
['2015-02-02', 1119.873, 3081.488, 1381.177],
['2015-01-01', 1030.099, 3059.794, 1355.894],
['2014-12-01', 1111.081, 3109.098, 1237.909],
['2014-11-03', 1223.068, 3134.425, 1161.125],
['2014-10-01', 1218.441, 2695.038, 1250.082],
['2014-09-01', 1280.913, 2621.644, 1201.39],
['2014-08-01', 1416.038, 2801.704, 1227.186],
['2014-07-01', 1461.646, 2718.524, 1339.334],
['2014-06-02', 1307.163, 2983.722, 1423.904],
['2014-05-01', 1332.301, 2943.89, 1340.253],
['2014-04-01', 1446.106, 2898.044, 1285.099],
['2014-03-03', 1395.374, 2712.71, 1290.464],
['2014-02-03', 1369.37, 2924.382, 1296.79],
['2014-01-01', 1284.4, 2648.331, 1305.827],
['2013-12-02', 1180.646, 2384.961, 1183.829],
['2013-11-01', 1206.584, 2212.07, 1123.282],
['2013-10-01', 1328.227, 2186.987, 1155.815],
['2013-09-02', 1357.743, 1809.787, 1114.245],
['2013-08-01', 1322.413, 1779.881, 1119.517],
['2013-07-01', 1242.815, 1875.387, 1245.585],
['2013-06-03', 1117.474, 1673.764, 1178.112],
['2013-05-01', 1347.412, 1738.319, 1187.878],
['2013-04-01', 1381.396, 1856.318, 1118.274],
['2013-03-01', 1493.496, 1823.7, 1162.796],
['2013-02-01', 1664.242, 1776.693, 1092.085],
['2013-01-01', 1633.503, 1677.881, 1067.642],
['2012-12-03', 1639.998, 1500.404, 1012.645]];

// Pairwise multiplication of the elements in two arrays; for use in mUp and mDown calculation
function dotproduct(a, b) {
  var n = 0;
  for (var i = 0; i < Math.min(a.length, b.length); i++) n += a[i][1] * b[i];
  return n;
}

// Define array of weights that is global to the program
var weight = [];

// Weighting function
function weights() {
  var k = 1;
  var lambda = 2;
  for (var x = 0.1; x < 20; x++) {
    weight.push([x, k * Math.pow(x/lambda, k-1) * Math.exp(-Math.pow(x/lambda, k)) / lambda]);
  }
}

// Create the weights
weights();
document.write(weight + '<hr>');

// Fetch first row of the prices array and keep the remainder as actual prices
var symbols = prices[0];
prices.shift();

// Loop through all columns of prices
for (var c in prices[0]) {
  var min = prices[0][c];
  var max = prices[0][c];
  var up = [];
  var down = [];
  var indicator = [];

  // Loop through all rows of prices and calculate the minimum and maximum, the up-value and down-value
  for (var r in prices) {
    min = Math.min(prices[r][c], min);             // minimum price, for normalisation
    max = Math.max(prices[r][c], max);             // maximum price, for normalisation
    var last = (typeof prices[parseInt(r)+1] != "undefined") ? prices[parseInt(r)+1][c] : 0;
    up.push(Math.max(prices[r][c] - last, 0));     // up value
    down.push(-Math.min(prices[r][c] - last, 0));  // down value
  }
  document.write('symbol: ' + symbols[c] + '<br>');

  var mUp = [];    // weighted up values
  var mDown = [];  // weighted down values

  // Loop through all values of up and down and apply the weighting to the up and down values progressively
  for (var i in up) {
    mUp.push(dotproduct(weight, up));
    up.shift();    // drop the first element off the up array
    mDown.push(dotproduct(weight, down));
    down.shift();  // drop the first element off the down array
  }
  // Add date and price to indicator array
  for (var r in prices) {
    indicator.push([prices[r][0], (prices[r][c]-min)/max, mUp[r]/(mUp[r]+mDown[r])]);
  }

  // *********
  // Add the code to generate the line graph of array indicator here
  // *********
  document.write('indicator: ' + indicator + '<br>');

  // Calculate percentile
  document.write('first indicator: ' + indicator[0][2] + '<br>');
  // Define a counter
  var count = 0;
  // Count the number of data points smaller than or equal to n
  for (i in indicator) if (indicator[i][2] <= indicator[0][2]) count++;
  document.write('count: ' + count + '<br>');
  // Return the percentile
  document.write('percentile: ' + count/indicator.length + '<br>');
  document.write('<hr>');
}

</script>

1 个答案:

答案 0 :(得分:0)

假设数组prices是这些计算的结果,您可以使用.arrayToDataTable()将数据与Google Visualization API接口。

&#13;
&#13;
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>Line Chart</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/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([
        ['Date', 'AAL', 'ABF', 'ADM'],
        ['2016-12-01', 1207.5, 2514.55, 1847.00],
        ['2016-11-01', 1123.5, 2475.00, 1901.00],
        ['2016-10-01', 1131, 2462.00, 1917.00],
        ['2016-09-01', 967.6, 2600.00, 2049.00],
        ['2016-08-01', 779.8, 3041, 2013.36],
        ['2016-07-01', 830.5, 2691, 2125.32],
        ['2016-06-01', 726.9, 2719, 1993.72],
        ['2016-05-02', 600.1, 2933.644, 1933.282],
        ['2016-04-01', 763.4, 3053.222, 1792.365],
        ['2016-03-01', 552.1, 3337.219, 1913.98],
        ['2016-02-01', 480.25, 3394.019, 1671.716],
        ['2016-01-04', 277.45, 3138.919, 1712.254],
        ['2015-12-01', 299.45, 3330.244, 1601.257],
        ['2015-11-02', 408.65, 3508.387, 1564.58],
        ['2015-10-01', 546.6, 3418.352, 1556.858],
        ['2015-09-01', 550.9, 3304.572, 1449.722],
        ['2015-08-03', 741, 3168.036, 1472.785],
        ['2015-07-01', 789.923, 3189.803, 1407.223],
        ['2015-06-01', 894.409, 2840.547, 1317.905],
        ['2015-05-01', 999.089, 2985.838, 1414.824],
        ['2015-04-01', 1076.017, 2817.219, 1458.897],
        ['2015-03-02', 985.457, 2778.762, 1432.678],
        ['2015-02-02', 1119.873, 3081.488, 1381.177],
        ['2015-01-01', 1030.099, 3059.794, 1355.894],
        ['2014-12-01', 1111.081, 3109.098, 1237.909],
        ['2014-11-03', 1223.068, 3134.425, 1161.125],
        ['2014-10-01', 1218.441, 2695.038, 1250.082],
        ['2014-09-01', 1280.913, 2621.644, 1201.39],
        ['2014-08-01', 1416.038, 2801.704, 1227.186],
        ['2014-07-01', 1461.646, 2718.524, 1339.334],
        ['2014-06-02', 1307.163, 2983.722, 1423.904],
        ['2014-05-01', 1332.301, 2943.89, 1340.253],
        ['2014-04-01', 1446.106, 2898.044, 1285.099],
        ['2014-03-03', 1395.374, 2712.71, 1290.464],
        ['2014-02-03', 1369.37, 2924.382, 1296.79],
        ['2014-01-01', 1284.4, 2648.331, 1305.827],
        ['2013-12-02', 1180.646, 2384.961, 1183.829],
        ['2013-11-01', 1206.584, 2212.07, 1123.282],
        ['2013-10-01', 1328.227, 2186.987, 1155.815],
        ['2013-09-02', 1357.743, 1809.787, 1114.245],
        ['2013-08-01', 1322.413, 1779.881, 1119.517],
        ['2013-07-01', 1242.815, 1875.387, 1245.585],
        ['2013-06-03', 1117.474, 1673.764, 1178.112],
        ['2013-05-01', 1347.412, 1738.319, 1187.878],
        ['2013-04-01', 1381.396, 1856.318, 1118.274],
        ['2013-03-01', 1493.496, 1823.7, 1162.796],
        ['2013-02-01', 1664.242, 1776.693, 1092.085],
        ['2013-01-01', 1633.503, 1677.881, 1067.642],
        ['2012-12-03', 1639.998, 1500.404, 1012.645]
      ]);

      var options = {
        title: 'Line Chart',
        curveType: 'function',
        legend: {
          position: 'bottom'
        }
      };

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

      chart.draw(data, options);
    }
  </script>
</head>

<body>
  <div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>

</html>
&#13;
&#13;
&#13;