Highcharts を使用して Vue.js で積み上げドーナツ (円) グラフを作成するにはどうすればよいですか?
P粉980815259
P粉980815259 2024-03-19 19:17:54
0
1
412

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

P粉980815259
P粉980815259

全員に返信(1)
P粉068486220

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

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

例: 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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!