Can't draw a chart

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/40226051/cant-draw-a-chart