Question

我刚刚加载了SmartAdmin的Angular 2种子项目，我正在尝试将Sparkline饼图对象添加到主页。我将以下范围添加到home / home.component.html：

df2['F5'] = df2['Date'].astype(str) + " " + df2['Time'].astype(str)
to_join = df2.loc[df2['STATUS'].astype(str) == 'F5', ['F5', 'KANR']].groupby('KANR').head(1)
df1.merge(to_join, how='left', on = 'KANR')

我在主页上看到的只是数字本身，3,5,2。我没看到饼图。我假设我需要导入一些组件，但我无法弄清楚如何或在何处执行此操作。

我确实找到了一个非常相似的问题，但答案对我没有帮助。该用户正在使用Angular 1，似乎在Angular 2中，没有app.js或app.ts或任何带有注释掉的app.graphs模块的文件。

Unable to get sparklines working in AngularJS version of SmartAdmin template

我对Angular 2和Web开发都很新，所以我希望你能忍受我。

Answer 1

事实证明有两个问题：

*任何Sparkline图都需要用指令saSparklineContainer

括在div中

*包含迷你图的范围必须具有类别迷你图

所以，

<span data-sparkline-type="pie" data-sparkline-offset="90" data-sparkline-piesize="18px">3,5,2</span>

不起作用。

<div saSparklineContainer >
    <span class="sparkline" data-sparkline-type="pie" data-sparkline-offset="90"    data-sparkline-piesize="18px">3,5,2</span>            
</div>

是我需要的。

在Angular 2 / SmartAdmin中添加迷你图饼图

1 个答案: