Question

我试图从昨天起通过JS更新jqplot PieChart，我没有任何突破。我在网上搜索过，似乎无法解决任何问题

图表数据保存在会话中，应用程序不断更新此会话。

这就是JSON的样子

[ ['Take home pay', 44228.33], ['Tax', 8771.67], ['Super', 4162.5 ], ['Regular expenses', 0 ], ['Unallocated', 44228.33], ['Testing', 8000] ]

当用户第一次导航到页面时，图表会正常加载。

这是图表加载的DIV

<div id="savings_expense" class="jqplot-target"></div>

当页面加载时，jqplot JS工作正常

$(document).ready(function () {

    var storedData = <?php echo $_SESSION['chart_data'] ?>;

    var plot1;
    jQuery.jqplot.config.enablePlugins = false;
    plot1 = jQuery.jqplot('savings_expense', [storedData],
        {
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer

            },
            legend: {
                show: true,
                rendererOptions: {
                    numberRows: 6
                },
                placement: 'outside',
                location: 's',
                marginTop: '15px'
            }
        }
    );
});

这是用户点击以更新图表的按钮。

<li onclick="updateGraph()"><a href="#pay">YOUR TAKE-HOME PAY</a></li>

我尝试了两种方法来更新PieChart

解决方案1  在此解决方案中，我收到错误Uncaught TypeError: Cannot read property 'replot' of undefined。

    var storedData = <?php echo $_SESSION['chart_data'] ?>;
    var plot1;
    function renderGraph() {  
        plot1.replot({
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer
            },
            legend: {
                show: true,
                rendererOptions: {
                    numberRows: 6
                },
                placement: 'outside',
                location: 's',
                marginTop: '15px'
            }
        });
    }

    function updateGraph() {
        alert('updateGraph');
        var newVal = <?php echo $_SESSION['chart_data'] ?>;
        storedData.push(newVal);
        renderGraph();
    }

解决方案2 在此解决方案中，饼图变为空白，但图例保持

var storedData = <?php echo $_SESSION['SMP']['chart_data'] ?>;
var plot1;
function renderGraph() {
    if ( plot1) {
        plot1.destroy();
    }

    jQuery.jqplot.config.enablePlugins = false;
    plot1 = jQuery.jqplot('savings_expense',[storedData],
        {
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer

            },
            legend: {
                show: true,
                rendererOptions: {
                    numberRows: 6
                },
                placement: 'outside',
                location: 's',
                marginTop: '15px'
            }
        }
    );
}

我将非常感谢这里的任何帮助。请不要分享任何链接，因为我已经了解了我可以在StackOverflow和网络上找到的每个解决方案

Answer 1

您必须按原样保留document.ready代码，然后在updateGraph之外添加函数document.ready（将所有变量保持在全局级别）。同时修改updateGraph，您需要在.replot()变量上调用plot1，因为您只更改数据而不是其他设置。

将ID设置为li，如下所示：<li id="updateGraph"><a href="#pay">YOUR TAKE-HOME PAY</a></li>

见下面的代码：

// declare variable outside document.ready
var plot1;
var storedData; 

$(document).ready(function () {

    storedData = <?php echo $_SESSION['chart_data'] ?>;


    jQuery.jqplot.config.enablePlugins = false;
    plot1 = jQuery.jqplot('savings_expense', [storedData],
        {
            seriesDefaults: {
                renderer: jQuery.jqplot.PieRenderer

            },
            legend: {
                show: true,
                rendererOptions: {
                    numberRows: 6
                },
                placement: 'outside',
                location: 's',
                marginTop: '15px'
            }
        }
    );

    $('#updateGraph').click(function(){updateGraph();});
});

function updateGraph() {
     var newVal = <?php echo $_SESSION['chart_data'] ?>;
    plot1.destroy();
    plot1.series[0].data = newVal;
    plot1.replot(true);
}

通过JS更新jqplot饼图不起作用

1 个答案: