コンポーネント詳細

Chart (Doughnut)

Doughnut chart with center space for summary metrics.

サンプル

参照情報

テンプレート
templates/components/chart.html
ゴールデン
N/A

Go(Marionette)サンプル

この実装例は Go の Marionette を使っています。ソース: docs/site-astro/public/examples/go/chart-doughnut.go

package goexamples

import (
	mb "github.com/YoshihideShirai/marionette/backend"
	mf "github.com/YoshihideShirai/marionette/frontend"
)

func RegisterChartDoughnutExample(app *mb.App) {
	app.Page("/chart-doughnut", func(ctx *mb.Context) mf.Node {
		return mf.Chart(mf.ChartProps{
			Type:   mf.ChartTypeDoughnut,
			Title:  "Plan mix",
			Labels: []string{"Free", "Team", "Enterprise"},
			Datasets: []mf.ChartDataset{
				{Label: "Accounts", Data: []float64{64, 28, 8}, BackgroundColors: []string{"#2563eb", "#14b8a6", "#f59e0b"}},
			},
		})
	})
}