5

既存のデータ シリーズを新しいデータ配列で更新し、完了したらredraw関数を呼び出そうとしています。これは完全に機能しますが、一種の拡大/縮小遷移が必要なため、満足していません。Highcharts の例を見たことがあります(既存のデータ セットをいじってから、[選択したシリーズに新しいデータを設定] ボタンをクリックします) が、この動作を再現できません。

これは私が書いたコードです:

  var series, newSeriesThreshold = this.chart.series.length * 2;

  for (var i = 0; i < data.length; i += 2) {
    series = {
      name:  this.data[i].title,
      data:  this.data[i].data,
      color: this.data[i].color
    };

    if (i >= newSeriesThreshold) {
      this.chart.addSeries(series, false);
    } else {
      var currentSeries = this.chart.series[i / 2];
      currentSeries.setData(series.data, false);
    }
  }

  this.chart.redraw();

グラフを作成するときのオプションは次のとおりです。

  var config = {
    chart: {
      renderTo: $(this.container).attr('id'),
      type: this.settings.type,
      animation: {
        duration: 500,
        easing: 'swing'
      }
    },
    title: {
      text: null
    },
    legend: {
      enabled: this.settings.legend.show
    },
    tooltip: {
      formatter: function() {
        return this.x.toFixed(0) + ": <b>" + this.y.toString().toCurrency(0) + '</b>';
      }
    },
    xAxis: {
      title: {
        text: this.settings.xaxis.title,
        style: {
          color: '#666'
        }
      }
    },
    yAxis: {
      title: {
        text: this.settings.yaxis.title,
        style: {
          color: '#666'
        }
      }
    },
    series: series,
    plotOptions: {
      column: {
        color: '#FF7400'
      }
    },
    credits: {
      enabled: false
    }
  };

これにより、効果が移行することなく、すぐに更新されます。私が間違っているかもしれないアイデアはありますか?

4

3 に答える 3

2

チャートを破棄して再度作成することで、この問題を解決しました。

これが私を助けるハイチャートフォーラムのリンクです:http://forum.highcharts.com/highcharts-usage/animation-on-redraw-t8636/#p93199

答えは、highcharts サポート チームから提供されます。

    $(document).ready(function() {
            var chartOptions = {
                    // Your chart options
                    series: [
                             {name: 'Serie 1' , color: '#303AFF', data: [1,1,1,1,1,1,1}
                            ]
                };

            var chart = new Highcharts.Chart(chartOptions);

        $("#my_button").click(function(){ 
            chart.destroy();
            chartOptions.series[0].data = [10,5,2,10,5,2,10];
            chart = new Highcharts.Chart(chartOptions);
        });
    });
于 2013-10-15T15:59:18.550 に答える
0

これは役立つかもしれません:

var mychart = $("#mychart").highcharts();     
var height = mychart.renderTo.clientHeight; 
var width = mychart.renderTo.clientWidth; 
mychart.setSize(width, height);

すべてのチャートを更新するには

$(Highcharts.charts).each(function(i,chart){
    var height = chart.renderTo.clientHeight; 
    var width = chart.renderTo.clientWidth; 
    chart.setSize(width, height); 
  });
于 2015-10-19T12:22:32.863 に答える
0

これは謎のままです。ある種のアニメーションが進行中であることを示唆する軸の更新を行うことができましたが、それは軸にのみ適用され、列には適用されません。

結局、私はこの行動に落ち着きました。

于 2012-07-13T07:56:57.360 に答える