highcharts - ハイチャートの読み込みイメージ

Question

http://api.highcharts.com/highcharts#loading の使用

表示されるオーバーレイの一部として画像を持つことは可能ですか? 具体的には「読み込み中」のgif画像ですか？

labelStyle セクションを使用してみましたが、今のところうまくいきません!

Answer 1

APIを調べた後。これは可能のようです。

labelStyle有効な CSS を受け入れます。通常はハイフンでつながれるプロパティは、ハイフンを削除し、次の文字を大文字にします。これはbackground-image、背景画像を提供するようなものを使用できることを意味します ( loading など.gif)。

var chart = new Highcharts.Chart({
    // ...

    loading: {
        labelStyle: {
            backgroundImage: 'url("http://jsfiddle.net/img/logo.png")',
            display: 'block',
            width: '136px',
            height: '26px',
            backgroundColor: '#000'
        }
    },

    // ...
});

ここにフィドルの例があります。

Answer 2

カスタム読み込みについては、この例を確認してください

$(function () {
    // the button handler
    var isLoading = false,
        $button = $('#button');
    $button.click(function() {
        if (!isLoading) {
            chart.showLoading();
            $button.html('Hide loading');
        } else {
            chart.hideLoading();
            $button.html('Show loading');
        }
        isLoading = !isLoading;
    });
    
    
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

.highcharts-loading {
  opacity: 1!important;
}
.highcharts-loading-inner {
  display: block;
}

.highcharts-loading-inner,
.highcharts-loading-inner:before,
.highcharts-loading-inner:after {
  background: #dfdfdf;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.highcharts-loading-inner {
  color: #dfdfdf;
  text-indent: -9999em;
  margin: 0 auto;
  top: 50%!important;
  position: relative;
  font-size: 11px;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.highcharts-loading-inner:before,
.highcharts-loading-inner:after {
  position: absolute;
  top: 0;
  content: '';
}
.highcharts-loading-inner:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.highcharts-loading-inner:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button">Show loading...</button>

<!-- Spinners -->
<!-- https://projects.lukehaas.me/css-loaders/ -->