图表 (Chart)

基于Highcharts.js实现。

概述

基于Highcharts.js实现
参考网站：Highcharts.js

代码演示

1.饼图示例

namespace WebSite.Docus.View.Charts;

class Chart1 : BaseComponent
{
    private Chart chart;
    private readonly ChartDataInfo[] datas = new ChartDataInfo[] {
        new ChartDataInfo
        {
            Name = "分类",
            Series = new Dictionary<string, object>{
                {"分类一",50},{"分类二",30},{"分类三",15},{"分类四",5}
            }
        }
    };

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Chart>().Id("chart1").Build(value => chart = value);
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            chart.YAxis = new { title = new { text = "数量" } };
            chart.ShowPie("类型统计", datas);
        }
    }
}

2.柱状图示例

namespace WebSite.Docus.View.Charts;

class Chart2 : BaseComponent
{
    private Chart chart;
    private readonly ChartDataInfo[] datas;

    public Chart2()
    {
        var data1 = new ChartDataInfo { Name = "类型一", Series = new Dictionary<string, object>() };
        var data2 = new ChartDataInfo { Name = "类型二", Series = new Dictionary<string, object>() };
        for (int i = 2010; i < DateTime.Now.Year; i++)
        {
            var rand1 = new Random();
            data1.Series[$"{i}"] = rand1.Next(100, 1000);
            var rand2 = new Random();
            data2.Series[$"{i}"] = rand2.Next(200, 1000);
        }
        datas = new ChartDataInfo[] { data1, data2 };
    }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Chart>().Id("chart2").Build(value => chart = value);
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            chart.YAxis = new { title = new { text = "数量" } };
            chart.ShowBar("柱状图统计", datas);
        }
    }
}

3.线性图示例

namespace WebSite.Docus.View.Charts;

class Chart3 : BaseComponent
{
    private Chart chart;
    private readonly ChartDataInfo[] datas;

    public Chart3()
    {
        var data1 = new ChartDataInfo { Name = "类型一", Series = new Dictionary<string, object>() };
        var data2 = new ChartDataInfo { Name = "类型二", Series = new Dictionary<string, object>() };
        for (int i = 2010; i < DateTime.Now.Year; i++)
        {
            var rand1 = new Random();
            data1.Series[$"{i}"] = rand1.Next(100, 1000);
            var rand2 = new Random();
            data2.Series[$"{i}"] = rand2.Next(200, 1000);
        }
        datas = new ChartDataInfo[] { data1, data2 };
    }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Chart>().Id("chart3").Build(value => chart = value);
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            chart.YAxis = new { title = new { text = "数量" } };
            chart.ShowLine("折线图统计", datas);
        }
    }
}