Highcharts: 8.1.1にアップグレードした後、空の円グラフをレンダリング中にエラーが発生しました

作成日 2020年06月14日 · 22コメント · ソース: highcharts/highcharts

期待される動作

空の円グラフはエラーなしでレンダリングされます。

実際の動作

エラーが表示されます：
ReferenceError: Highcharts is not defined
https://github.com/highcharts/highcharts/blob/decfc3ab47ec88e28472f065fd2454b46c9f1fd1/js/parts/PieSeries.js#L789

再現する手順を含むライブデモ

https://codesandbox.io/s/highcharts-vue-demo-ye65e

製品バージョン

8.1.1

影響を受けるブラウザ

全て

Done Regression

ソース

pablolmedorado

👍3

最も参考になるコメント

これが8.1.2でも私にとっても問題であることを確認してください

https://stackblitz.com/edit/angular-ivy-udtk3a?file=package.json

Crocsx 2020年06月18日

👍7 👀1

全てのコメント22件

空で

clemeno 2020年06月15日

👍1

こんにちは@pablolmedoradoと@clemeno
問題を報告していただきありがとうございます。

問題は最新バージョンのみにあり、すべてのラッパーに関連しているようです。実際には、 masterブランチですでに修正されています。これは、 masterからの最新のビルドをコードサンドボックスの例に入れ、Highchartsバージョンを置き換えると、問題が解消されたように見えるためです。
つまり、数日中に新しいバージョンをリリースする必要があり、この問題は自動的に解決されます。

実例： https ：

敬具！

Denyllon 2020年06月15日

👍3 ❤1 🎉1

この問題は、リリースされたバージョンの8.1.2でも、少なくともnpmに公開されたバージョンではまだ存在しているようです。

bazineta 2020年06月16日

👍4 😕2

問題を再開します。

@ bre1470-確認してもらえますか？＃13681は閉じていますが、モジュールだけでなくコアでもHighcharts名前空間が使用されているようです。デモ： https ： package.json

pawelfus 2020年06月17日

これが8.1.2でも私にとっても問題であることを確認してください

https://stackblitz.com/edit/angular-ivy-udtk3a?file=package.json

Crocsx 2020年06月18日

👍7 👀1

2つのシナリオで再現されます。

series.dataが空白の場合
データのすべてのy軸が0の場合

jitension 2020年06月18日

修正が出るまでの回避策について知りたい。 @pawelfusの再現リンクを使用し、highchartsバージョンを8.1.0 _appears_に変更して、この問題を修正します。これは今のところ推奨される回避策ですか？

kennyjwilli 2020年06月25日

修正が出るまでの回避策について知りたい。 @pawelfusの再現リンクを使用し、highchartsバージョンを8.1.0 _appears_に変更して、この問題を修正します。これは今のところ推奨される回避策ですか？

この場合、データなしでグラフを作成し、後でデータを追加することで問題が発生しました。たまたま、その時点ですでにデータがあったので、データを使ってグラフを作成でき、問題を回避できました。それがあなたの選択肢であるなら、それは一見の価値があります。

bazineta 2020年06月26日

@kennyjwilli 8.1.0以降に利用したい変更がある場合は、次のようにdrawEmptyメソッドをラップすることもできます。

// Workaround for https://github.com/highcharts/highcharts/issues/13710
(function(H) {
  H.seriesTypes.pie.prototype.drawEmpty = function() {
    var centerX,
      centerY,
      start = this.startAngleRad,
      end = this.endAngleRad,
      options = this.options;
    // Draw auxiliary graph if there're no visible points.
    if (this.total === 0) {
      centerX = this.center[0];
      centerY = this.center[1];
      if (!this.graph) {
        this.graph = this.chart.renderer
          .arc(centerX, centerY, this.center[1] / 2, 0, start, end)
          .addClass("highcharts-empty-series")
          .add(this.group);
      }
      this.graph.attr({
        d: H.SVGRenderer.prototype.symbols.arc(
          centerX,
          centerY,
          this.center[2] / 2,
          0,
          {
            start: start,
            end: end,
            innerR: this.center[3] / 2
          }
        )
      });
      if (!this.chart.styledMode) {
        this.graph.attr({
          "stroke-width": options.borderWidth,
          fill: options.fillColor || "none",
          stroke: options.color || "#cccccc"
        });
      }
    } else if (this.graph) {
      // Destroy the graph object.
      this.graph = this.graph.destroy();
    }
  }
})(Highcharts);

codesandbox.ioの実例

それ以外の場合は、今のところ8.1.0を使用することをお勧めします。