Question

我想从组合框中将动态图表添加到窗口小部件。我已经使用工厂模式来实现这一目标。这是后端的代码：

 public interface ICharts
    {
        string chartType ();
    }


 public class ChartsFactory
{
    public ICharts GraphType(ChartsType chartype)
    {
        switch (chartype)
        {
            case ChartsType.AREA:
                return new Area();
            case ChartsType.BAR:
                return new Bar();
            case ChartsType.HORIZONBAR:
                return new HorizonBar();
            case ChartsType.HEATMAP:
                return new Heatmap();
            case ChartsType.PIE:
                return new Pie();
            default:
                throw new ArgumentOutOfRangeException();
        }
    }
}

这是我在前端的组合框，我使用了棱角分明的材料：

 <md-dialog-content>
        <label>Type graph</label>
        <md-select ng-model="charttype">
            <md-option value="Bar">Bar</md-option>
            <md-option value="Area">Area</md-option>
            <md-option value="Heatmap">Heatmap</md-option>
            <md-option value="Pie">Pie</md-option>
            <md-option value="Horizonbar">Horizonbar</md-option>
        </md-select>
    </md-dialog-content>

当我选择Pie时，它必须在小部件中绘制一个饼图。问题是现在绘制图表的最佳方法是什么？我正在考虑各种解决方案，如在C＃中调用javascript代码，但我不认为这是一种干净的方式。

这是图表类的示例：

public class Area : ICharts
{
    public string chartType()
    {
        throw new NotImplementedException();
    }
}

我正在考虑为每个图表创建一个java脚本文件，并在图表类型方法中调用。

有人能指出我正确的方向，实现这一目标的最佳途径是什么？

我正在使用图表的 Highcharts 库。

亲切的问候

Answer 1

Becaus Highcharts是一个客户端库，您需要在客户端调用绘制图表。

对于每种图表类型，您可以创建一个角度组件。然后，通过选择图表类型，您可以选择使用Highcharts渲染图表的匹配组件。

动态添加基于工厂模式的图表

1 个答案: