javascript - Highstock 上的多窗格

Question

我正在尝试使用像这里http://www.highcharts.com/stock/demo/candlestick-and-volume/grid-light这样的 highcharts 创建一个两个窗格的股票图表

我将我的 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>

标签： javascripthighcharts

Answer 1

您定义了相对于您的数据的错误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
      }
    ]
  });
});

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

演示：

• http://jsfiddle.net/BlackLabel/b2qgrLs1/1/

API参考：

• https://api.highcharts.com/highstock/series.line.dataGrouping.units