无法绘制图表 [英] Can't draw a chart

问题描述

根据文档，我可以使用以下代码绘制图表控件:

 <div
    class="control-chart centered wrap-legend"
    data-control="chart-pie"
    data-size="200"
    data-center-text="100">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div> 

但是输出如下:

 Label 1 100
Label 2 100
Label 3 100 

我应该怎么做才能使其正常工作?

解决方案

我想您正在尝试在前端进行此操作.但是， UI文档指的是后端，您可以在其中构建后端页面和控制器. 您可能需要提取后端样式表的一部分来实现该目的或了解其工作方式.同样，在那里设置的数据属性(data-control="chart-pie" data-size="200" data-center-text="100")也由后端JavaScript框架处理.我想从那里的代码中找到并提取该功能以在您的前端页面中使用它会非常困难且不容易.

如果您想尝试自己构建类似的东西，请参见以下一些基本示例，并使用CSS绘制形状: https://css-tricks.com/examples/ShapesOfCSS/#cone

但是我想如果没有一些乏味的黑客攻击，您将无法在前端页面上使用十月后端的所有UI元素.

According to the documentation, I can draw a chart control using the following code:

<div
    class="control-chart centered wrap-legend"
    data-control="chart-pie"
    data-size="200"
    data-center-text="100">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

But the output goes like this:

Label 1 100
Label 2 100
Label 3 100

What should I do to make it work?

解决方案

I suppose you are trying to do this on the frontend. However, the UI documentation is referring to the backend, for how you can build your backend pages and controllers there. You would need to extract parts of the backend stylesheet to achieve that or understand how it works. Also the data-attributes set there (data-control="chart-pie" data-size="200" data-center-text="100") are handled by the backend JavaScript framework. I guess it would be quite difficult and not easy to locate and extract that functionality from the code there to use it in your frontend pages.

Here are some basic examples and at drawing shapes with CSS if you want to try building something like that on your own: https://css-tricks.com/examples/ShapesOfCSS/#cone

But I guess you cannot use all the UI elements from the October backend on your frontend pages without some tedious hacking.

这篇关于无法绘制图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！