Question

我想使用chart.showLoading()和chart.hideLoading()，但不确定将其放置在何处。我想在json data从数据库获取数据时显示动画的gif或文本消息。

Answer 1

您必须在获取数据之前初始化图表，并在chart.load事件上调用chart.showLoading()。接下来，在获取数据时，使用chart.hideLoading()删除加载，并使用chart.addSeries()方法添加每个系列。查看下面发布的演示和代码。

代码：

$.getJSON('https://api.jsonbin.io/b/5c9499db08b9a73c3abeec4a', function(data) {

  var X = [],
    Y = [],
    temp = [],
    dataLength = data.length,

    // set the allowed units for data grouping
    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]
    ]);
    Y.push([
      data[i][0], // the date
      data[i][2]
    ]);

    temp.push([
      data[i][0], // the date
      data[i][3] // the temp
    ]);
  }

  var chartSeries = [
    {
      type: 'line',
      name: 'Y',
      data: Y,
      yAxis: 0,
      dataGrouping: {
        units: groupingUnits
      },
      tooltip: {
        valueDecimals: 7
      },
      lineWidth: 3
    },
    {
      type: 'line',
      name: 'X',
      data: X,
      yAxis: 1,
      dataGrouping: {
        units: groupingUnits
      },
      tooltip: {
        valueDecimals: 7
      },
      lineWidth: 3
    },
    {
      type: 'line',
      name: 'temp',
      data: temp,
      yAxis: 2,
      dataGrouping: {
        units: groupingUnits
      },
      tooltip: {
        valueDecimals: 4
      },
      lineWidth: 3
    }
  ];

  chart.hideLoading();
  chart.addSeries(chartSeries[0], false);
  chart.addSeries(chartSeries[1], false);
  chart.addSeries(chartSeries[2], false);
  chart.redraw();
});

// create the chart
var chart = Highcharts.stockChart('container', {
	chart: {
  	events: {
    	load: function() {
      	this.showLoading();
      }
    }
  },
  rangeSelector: {
    buttons: [{
      type: 'hour',
      count: 1,
      text: '1h'
    }, {
      type: 'day',
      count: 2,
      text: '2d'
    }, {
      type: 'week',
      count: 1,
      text: '1w'
    }, {
      type: 'year',
      count: 1,
      text: '1y'
    }, {
      type: 'all',
      text: 'All'
    }],
    inputEnabled: true, // it supports only days
    selected: 2, // day

    buttonTheme: { // styles for the buttons
      style: {
        fontSize: '20'
      }
    },
  },

  title: {
    text: '<span style="font-size:28px">Tilt Meter Labuhan<span>'
  },

  yAxis: [{
      labels: {
        align: 'right',
        x: -3,
        style: {
          fontSize: '18px'
        }
      },
      opposite: false,
      title: {
        text: 'X ',
        style: {
          fontSize: '18px'
        }
      },
      height: '50%',
      lineWidth: 3,

      resize: {
        enabled: true
      }
    },
    {
      labels: {
        align: 'right',
        x: 3,
        style: {
          fontSize: '18px'
        }
      },
      title: {
        text: 'Y',
        style: {
          fontSize: '18px'
        }
      },
      height: '50%',
      lineWidth: 3,
      opposite: true,
      resize: {
        enabled: true
      }
    },
    {
      labels: {
        align: 'right',
        x: -3,
        style: {
          fontSize: '18px'
        }
      },
      title: {
        text: 'Temperature',
        style: {
          fontSize: '18px'
        }
      },
      top: '55%',
      height: '50%',
      offset: 0,
      lineWidth: 2
    }
  ],

  tooltip: {
    headerFormat: '<span style="font-size:18px">{point.x:%A, %b %e, %Y}</span>',

    style: {
      fontWeight: 'bold',
      fontSize: '20px'
    },
    split: true
  },

  series: []
});

<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<div id="container" style="height:100%;
    width:100%;
    position:absolute;"></div>

演示：

https://jsfiddle.net/BlackLabel/1zbu308k/1/

API参考：

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

在Highstock中添加showLoading（）

1 个答案: