jquery - I'm trying to add multiple RGraphs canvases to website

Question

i want to display a pie chart against multiple profiles (a list created from mysql database) on the same page. I am currently using iframes to call in the pie graph from another page but is there a better way to do this? Each chart has different values. Is it possible to create a function on the canvas?

<canvas id="cvs" width="100" height="100" >[No canvas support]</canvas>
    <script>
        window.onload = function ()
        {
            var donut = new RGraph.Pie('cvs', [17,40,25,8]);
            donut.Set('chart.variant', 'donut');
            donut.Set('chart.tooltips', ['Standard','Location','Social']);
            donut.Set('chart.strokestyle', 'transparent');
            donut.Set('chart.exploded', 2);

            donut.Set('chart.gutter.left', 5);
            donut.Set('chart.gutter.top', 5);
            donut.Set('chart.gutter.right', 5);
            donut.Set('chart.gutter.bottom', 5);

            donut.Set('chart.colors', ['rgba(222,82,49,0.15)','rgba(222,82,49,0.40)','rgba(222,82,49,0.80)','rgba(222,82,49,0)']);

            donut.Draw();
        }

    </script>

Answer 1

是的，您可以在同一画布上显示不同的图表。

在可下载的存档中有一个演示，它显示了这个名为：

demos/bar-css3-animations.html

您可以在此处下载 RGraph 存档：

https://www.rgraph.net/download.html#stable

您可以拥有创建和显示每个图表的函数：

function ShowChart1 ()
{
    RGraph.Reset(canvas);

    // Create and show first chart
}

function ShowChart2 ()
{
    RGraph.Reset(canvas);

    // Create and show second chart
}