Highcharts を使用して Vue.js で積み上げドーナツ (円) グラフを作成するにはどうすればよいですか?

Question

Highcharts を使用してドーナツ グラフを作成したいのですが、このグラフを積み上げ形式に変換できません。 Vue.js コードは次のとおりです:

<テンプレート>
  <div>
    <b-col md="12" style="margin-top: 40px">
      <highcharts :options="pieChartOptions"></highcharts>

    </b-col>

  </div>

</テンプレート>

<スクリプト>
「axios」から axios をインポートします
「vuex」から {mapActions} をインポートします。
「highcharts」からハイチャートをインポートします。
'highcharts-vue' から {Chart} をインポートします
「../../components/DashboardTable/DashboardTable」から DashboardTable をインポートします。
'@/components/Widget/Widget' からウィジェットをインポートします。

デフォルトのエクスポート {
  名前: "テストチャート",
  コンポーネント: {
    ダッシュボードテーブル、ウィジェット、
    ハイチャート: チャート
  }、
  データ（）{
    戻る{
      pieChartOptions:{
        色: ['#01BAF2'、'#71BF45'、'#FAA74B'、'#B37CD2']、
        チャート： {
          タイプ: 'パイ'
        }、
        アクセシビリティ: {
          ポイント： {
            値のサフィックス: '%'
          }
        }、
        タイトル： {
          テキスト: 'コーヒー'
        }、
        ツールチップ: {
          pointFormat: '{series.name}: <b>{point.percentage:.0f}%</b>'
        }、
        プロットオプション: {
          パイ: {
            allowPointSelect: true、
            カーソル: 'ポインタ'、
            データラベル: {
              有効: true、
              形式: '{point.name}: {y} %'
            }、
            showInLegend: true
          }
        }、
        シリーズ： [{
          名前: 'タイプ'、
          colorByPoint: true、
          innerSize: '75%'、
          データ： [{
            名前: 'フィルター'、
            y:68.1、
          }、{
            名前: 'トルコ'、
            y:11.0
          }、{
            名前：「ラテ」、
            y:11.2
          }、{
            名前：「エスプレッソ」、
            y:9.7
          }]
        }]
      }
    }
  }、
}

</スクリプト>

<スタイル>

</style>

私が作成したグラフは次のようになります:

Elasticsearch で積み上げドーナツ チャートを提供しようとしています。以下に例を示します:

「name」と「y」の後に発音を追加しようとしましたが、成功しませんでした。また、インストール済み (または任意のメソッド) にサブカテゴリを追加する必要がありますか?これについて何かアイデアがございましたら、ご協力をお待ちしております。

Answer 1

ハイチャートでこのタイプのチャートを作成するには、サンバースト シリーズ タイプを使用できます:

＃＃＃シリーズ： [{ タイプ: 'サンバースト'、 ... }]

例: https://jsfiddle.net/BlackLabel/2Ldpvogr/

ドキュメント: https://www.highcharts.com/docs/chart-and-series-types/pie-chart

---

または、指定された

size および innerSize を持つ 2 つの円グラフ シリーズ: ＃＃＃チャート： { タイプ: 'パイ' }、 シリーズ： [{ サイズ: '60%'、 ... }、{ サイズ: '80%'、 innerSize: '60%'、 ... }]

---

例:

https://jsfiddle.net/BlackLabel/uogq3waf/

ドキュメント:

https://www.highcharts.com/docs/chart-and-series-types/sunburst-series