Highstock上的多窗格

时间:2019-03-22 07:52:21

标签: javascript highcharts

我正在尝试使用高图创建两个窗格的股票图表,如此处的http://www.highcharts.com/stock/demo/candlestick-and-volume/grid-light

我将JSON文件存储在这里https://api.jsonbin.io/b/5c9499db08b9a73c3abeec4a

运行项目时,我不知道为什么数据无法正常工作,并且十进制值变大,以及如何将时间序列与我的7+ GMT系列同步。

这是我的项目:

$.getJSON('https://api.jsonbin.io/b/5c9499db08b9a73c3abeec4a', function (data) {

       var  X 		= [],
   		 Y       = [],
        temperature  = [],
        dataLength = data.length,
        
        // set the allowed units for data grouping
        groupingUnits = [[
            'week',                         // unit name
            [1]                             // allowed multiples
        ], [
            'month',
            [1, 2, 3, 4, 6]
        ]],

        i = 0;

    for (i; i < dataLength; i += 1) {
        X.push([
            data[i][0], // the date
            data[i][1]  // the X
        ]);
        Y.push([
            data[i][0], // the date
            data[i][2]  // the Y
        ]);

        temperature.push([
            data[i][0], // the date
            data[i][3] // the temp
        ]);
    }


    // create the chart
    Highcharts.stockChart('container', {

        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Historical'
        },

        yAxis: [{
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'X'
            },
            height: '60%',
            lineWidth: 2,
            resize: {
                enabled: true
            }
        }, {
            labels: {
                align: 'right',
                x: -3
            },
            title: {
                text: 'temp'
            },
            top: '65%',
            height: '35%',
            offset: 0,
            lineWidth: 2
        }],

        tooltip: {
            split: true
        },

        series: [
        {
            type: 'line',
            name: 'X',
            data: X,
            dataGrouping: {
                units: groupingUnits
            }
        },
        {
            type: 'line',
            name: 'Y',
            data: Y,
            dataGrouping: {
                units: groupingUnits
            }
        },
         {
            type: 'line',
            name: 'temp',
            data: temperature,
            yAxis: 1,
            dataGrouping: {
                units: groupingUnits
            }
        }]
    });
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 400px; min-width: 310px"></div>

1 个答案:

答案 0 :(得分:1)

您相对于数据定义了错误的 // A recursive function to print all subsets with the // help of dp[][]. Vector p[] stores current subset. function printSubsetsRec(arr, i, sum, p) { // If we reached end and sum is non-zero. We print // p[] only if arr[0] is equal to sun OR dp[0][sum] // is true. if (i == 0 && sum != 0 && dp[0][sum]) { p.push(arr[i]); console.log(p); return; } // If sum becomes 0 if (i == 0 && sum == 0) { console.log(p); return; } // If given sum can be achieved after ignoring // current element. if (dp[i-1][sum]) { // Create a new vector to store path var b = p.slice(0); printSubsetsRec(arr, i-1, sum, b); } // If given sum can be achieved after considering // current element. if (sum >= arr[i] && dp[i-1][sum-arr[i]]) { p.push(arr[i]); printSubsetsRec(arr, i-1, sum-arr[i], p); } } // Prints all subsets of arr[0..n-1] with sum 0. function printAllSubsets(arr, sum) { var n = arr.length if (n == 0 || sum < 0) return; // Sum 0 can always be achieved with 0 elements dp = []; for (var i=0; i<n; ++i) { dp[i] = [] dp[i][0] = true; } // Sum arr[0] can be achieved with single element if (arr[0] <= sum) dp[0][arr[0]] = true; // Fill rest of the entries in dp[][] for (var i = 1; i < n; ++i) for (var j = 0; j < sum + 1; ++j) dp[i][j] = (arr[i] <= j) ? dp[i-1][j] || dp[i-1][j-arr[i]] : dp[i - 1][j]; if (dp[n-1][sum] == false) { console.log("There are no subsets with sum %d\n", sum); return; } // Now recursively traverse dp[][] to find all // paths from dp[n-1][sum] var p = []; printSubsetsRec(arr, n-1, sum, p); } printAllSubsets([1,2,3,4,5], 10); 数组。请查看下面发布的示例。

代码:

dataGrouping.units
$.getJSON('https://api.jsonbin.io/b/5c9499db08b9a73c3abeec4a', function(data) {

  var X = [],
    Y = [],
    temperature = [],
    dataLength = data.length,
    groupingUnits = [
      [
        'millisecond', // unit name
        [1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
      ],
      [
        'second', [1, 2, 5, 10, 15, 30]
      ],
      [
        'minute', [1, 2, 5, 10, 15, 30]
      ],
      [
        'hour', [1, 2, 3, 4, 6, 8, 12]
      ],
      [
        'day', [1]
      ],
      [
        'week', [1]
      ],
      [
        'month', [1, 2, 3, 4, 6]
      ],
      [
        'year',
        null
      ]
    ],
    i = 0;

  for (i; i < dataLength; i += 1) {
    X.push([
      data[i][0], // the date
      data[i][1] // the X
    ]);
    Y.push([
      data[i][0], // the date
      data[i][2] // the Y
    ]);

    temperature.push([
      data[i][0], // the date
      data[i][3] // the temp
    ]);
  }

  // create the chart
  Highcharts.stockChart('container', {

    yAxis: [{
      labels: {
        align: 'right',
        x: -3
      },
      title: {
        text: 'X'
      },
      height: '60%',
      lineWidth: 2,
      resize: {
        enabled: true
      }
    }, {
      labels: {
        align: 'right',
        x: -3
      },
      title: {
        text: 'temp'
      },
      top: '65%',
      height: '35%',
      offset: 0,
      lineWidth: 2
    }],

    tooltip: {
      split: true
    },

    plotOptions: {
      series: {
        dataGrouping: {
          units: groupingUnits
        }
      }
    },

    series: [{
        name: 'X',
        data: X
      },
      {
        name: 'Y',
        data: Y
      },
      {
        name: 'temp',
        data: temperature,
        yAxis: 1
      }
    ]
  });
});

演示:

API参考: