javascript - 使用旧数据重新创建图表-6ren

javascript - 使用旧数据重新创建图表

转载作者：行者123 更新时间：2023-12-03 16:52:30

我使用了JSF 2.2，Primefaces 6.0，CDI和Highcharts 4.2.3。我的页面之一包含一张图表(Highcharts)和一个干扰我图表的简单表格。我剪切了代码(请看下面)，向您展示代码中最重要的部分。

我想实现这样的目标:

当我在表单中按commandButton时，图表应使用新数据重新创建。

到目前为止，我已经:

在脚本中的函数中声明了几个js变量；

创建了一个createChart函数，该函数使用#{bean.getDataForChart1a(typeOfData)}从CDI bean(实际上是从数据库)下载数据(对于我的图表)，并将这些数据放入js变量中。除了下移数据外，该函数还创建图表。

创建了一个createNewChart函数，该函数销毁了我当前的图表，并调用createChart函数来创建应包含新数据的新图表。

问题是最后阶段。在下面的 View 中，我已经将 oncomplete="createNewChart();"属性添加到了 commandButton中，此刻，我的页面如下所示:

打开页面时，一切正常。下载数据并创建图表。

当我按commandButton时，将重新创建图表，但它使用的是旧数据。我注意到createChart函数中没有再次下载数据，js没有执行#{bean.getDataForChart1a(typeOfData)}。因此，#{bean.getDataForChart1a(typeOfData)}在开始时仅执行一次。我不明白为什么。

如何解决此问题？

我的xhtml页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:pe="http://primefaces.org/ui/extensions">

<h:head> 
    <!-- loading css -->
</h:head>

<h:body>

    <div id="container" style="height: 750px; width: 100%; margin: 0 auto;"/>

    <script type="text/javascript">

        //<![CDATA[

        var chart;

        var protos;
        var dataChart;
        var color;

        var seriesChart;
        var i, len;

        function createChart() {    

            //Downloading data for the chart
            protos = #{visualizationController.getDataForChart1a("protos")};
            dataChart = #{visualizationController.getDataForChart1a("data")};
            color = #{visualizationController.getDataForChart1a("color")};

            seriesChart = [];

            //Creating several series of the data
            for (i = 0, len = protos.length; i < len; i++) {

                seriesChart.push({
                    color: color[i],
                    name: protos[i],
                    data: dataChart[i]
                    //other options
                });
            }

            console.time('scatter');
            console.time('asyncRender');

            Highcharts.setOptions({
                lang: {
                    //translate
                }
            });

            // Create the chart        
            chart = new Highcharts.Chart({

                //other options

                chart: {

                    //other options                     
                    renderTo: "container"
                },                  

                series : seriesChart            
            }); 

            console.timeEnd('scatter');

        }

        function createNewChart(){

            chart.destroy();
            createChart();  
        }

        createChart();

        //]]>
    </script>

    <h:form id="filterForm">

        <p:selectManyCheckbox id="filter" value="#{visualizationController.selectedKindOfNetwork}" layout="responsive" columns="4">
            <p:ajax update="filterButton" />
            <f:selectItems value="#{visualizationController.kindOfNetwork}" var="kindOfNetwork" itemLabel="#{kindOfNetwork}" itemValue="#{kindOfNetwork}" />
        </p:selectManyCheckbox>

        <br/>

        <p:commandButton id="filterButton" value="Filtruj" action="#{visualizationController.actionFilterButtonForChart1a()}"
                        disabled="#{!visualizationController.visibilityFilterButtonForChart1a}"
                        update="filterForm"
                        oncomplete="createNewChart();"/>

    </h:form>

</h:body>        
</html>

最佳答案

我已经达到了预期的结果。基于@SiMag的评论，我发布了答案，其中包括几种可能的解决方案。帖子分为几个部分，使您可以了解我做错了什么以及为解决此问题所做的事情。

我做错什么了？

就像@SiMag写道:

The script tag isn't updated after the first load so the #{visualizationController.getData...} expressions aren't evaluated anymore and they are referring to the old data.

我到底是什么问题？

此刻，当我知道自己做错了什么时，正确的问题是:

如何将几个值从CDI bean传递到javascript？

如何在服务器或客户端调用javascript函数(将就绪数据和必需数据传递给此函数)？

我的页面应该如何工作？

这是您必须知道的最后一个问题，以了解我将在下一部分中进行的操作。我的页面应如下所示:

加载/打开页面时，应执行createChart javascript函数(自动执行，无需任何按钮或链接)，并且该函数应使用我在CDI bean中设置的多个值。作为此操作的结果，应显示该图表。

每次按下按钮时，应执行changeData javascript函数，并且该函数应使用在CDI bean中设置的几个值。作为此操作的结果，图表应更新其显示的数据。

如果您想实现其他目标，那不是问题。根据您在这里可以找到的解决方案，您将能够实现所需的解决方案。

第一个解决方案

第一种解决方案基于:

通过RequestContext将一些值从CDI bean传递到javascript。为了实现这一点，我基于素语表documentation (第11.1章RequestContext)；

在服务器端调用createChart函数；

在客户端调用changeChart函数。

首先，我在javascript函数中添加了三个参数(对于每个要从CDI bean传递到javascript代码的值，每个参数一个)。此刻，脚本应如下所示:

<script type="text/javascript">

    //<![CDATA[

    var chart;

    var protos;
    var dataChart;
    var color;

    var seriesChart;
    var i, len;

    //Creating the chart.
    function createChart(protosArg, dataArg, colorsArg) { 

        $(function() {

            //The data are parsed
            protos = JSON.parse(protosArg);
            dataChart = eval(dataArg);
            colors = JSON.parse(colorsArg);

            seriesChart = [];

            //Creating several series of the data
            for (i = 0, len = protos.length; i < len; i++) {

                seriesChart.push({
                    color: color[i],
                    name: protos[i],
                    data: dataChart[i]
                    //other options
                });
            }

            console.time('scatter');
            console.time('asyncRender');

            Highcharts.setOptions({
                lang: {
                    //translate
                }
            });

            // Create the chart        
            chart = new Highcharts.Chart({

                //other options

                chart: {

                    //other options                     
                    renderTo: "container"
                },                  

                series : seriesChart            
            }); 

            console.timeEnd('scatter');
        });
    }

    //Updating the chart using the new supplied data.
    function changeData(protosArg, dataArg, colorsArg){

        $(function() {

            protos = JSON.parse(protosArg);
            dataChart = eval(dataArg);
            colors = JSON.parse(colorsArg);

            seriesChart = [];

            //Creating several series of the data using the new supplied data.
            for (i = 0, len = protos.length; i < len; i++) {

                seriesChart.push({
                    color: color[i],
                    name: protos[i],
                    data: dataChart[i]
                    //other options
                });
            }

            //Removing the old data from the chart.
            for (i = 0, len = chart.series.length; i < len; i++) {

                chart.series[0].remove(false);
            }   

            //Inserting the new data to the chart.
            for (i = 0, len = protos.length; i < len; i++) {

                chart.addSeries(seriesChart[i],false);
            }

            chart.redraw();

        }); 
    }

    //]]>
</script>

让我们继续到服务器。在这里，我向您展示我的数据的样子。在服务器端，我创建了三个 String变量。在服务器端，此变量的输出如下所示:

原型(prototype):["tcp","udp",...]

数据:[[[date,23],[date,1234]],[[date,1234]]]

颜色:["black","white",...]

上面的样子，我使用 JSON.parse()和 eval()方法保存传递的数据。为什么？由于浏览器将传递的数据解释为字符串，因此我们必须将数据转换为数组。

在服务器端，我还使用 RequestContext#addCallbackParam()方法创建了几个回调参数。 getProtos()， getData()和 getColors()方法返回带有我准备好的数据的字符串。

requestContext = RequestContext.getCurrentInstance();
requestContext.addCallbackParam("protosArg", getProtos());
requestContext.addCallbackParam("dataArg", getData());
requestContext.addCallbackParam("colorsArg", getColors());

最后，我调用 RequestContext#execute()方法，该方法调用 createChart javascript函数并传递三个必需值:

    @PostConstruct
    public void init() {

        //Creating the callback parameters.
        initData();     

        requestContext.execute(String.format("createChart('%s', '%s', '%s')", getProtos(),getData(),getColors()));
    }

请注意，，我已使用 ''字符在javascript端实现了正确的表示。目前，浏览器会将数据解释为字符串。我在CDI bean的 execute()方法(具有 init()批注)中调用 @PostConstruct方法，因此，我确定:

createChart javascript函数在开始时仅执行一次(CDI bean具有@ViewScoped批注)；

将准备在脚本中下载的数据。

我在客户端完成的最后一件事是:更改 oncomplete组件的 <p:commandButton>属性的值。 oncomplete属性调用 changeData javascript函数。 args参数引用我在服务器端设置的回调参数。

<p:commandButton id="filterButton" value="Filter" action="#{chart2Controller.actionFilterButton()}"
                disabled="#{!chart2Controller.visibilityFilterButton}"
                update="filterForm"
                oncomplete="changeData(args.protosArg, args.dataArg, args.colorsArg);"/>

我的CDI bean的一部分:

@Named
@ViewScoped
public class Chart2Controller implements Serializable {

    /**
     * Start method.
     */
    @PostConstruct
    public void init() {

        //Creating the callback parameters.
        initData();     

        requestContext.execute(String.format("createChart('%s', '%s', '%s')", getProtos(),getData(),getColors()));
    }

    /**
     * Downloading the data from the database.
     */
    private void initData(){


        /*
         * Sending the query to the database including the filter options of the form,
         * saving the result and preparing the data basing on the result.
         */

        //Preparing the callback parameters.
        requestContext = RequestContext.getCurrentInstance();
        requestContext.addCallbackParam("protos", protos);
        requestContext.addCallbackParam("data", data);
        requestContext.addCallbackParam("colors", colors);
    }

    /**
     * Action for the filter button.
     */
    public void actionFilterButton(){

        initData(); 
    }   

    /**
     * Visibility for filter button.
     */
    public boolean getVisibilityFilterButton(){     
        //return true or false.
    }   

    //Getter and Setter

    private static final long serialVersionUID = -8128862377479499815L;

    @Inject
    private VisualizationService visualizationService;

    private RequestContext requestContext;

    private List<String> kindOfNetwork;
    private List<String> selectedKindOfNetwork;

    private String protos;
    private String data;
    private String colors;
}

第二解决方案

第二种解决方案基于:

通过RequestContext将一些值从CDI bean传递到javascript；

在客户端调用createChart函数；

在客户端调用changeChart函数。

看起来，该解决方案与先前的解决方案相似，但是 createChart函数正在调用的位置不同。在这种情况下，我在客户端调用了 createChart，并使用EL从CDI bean提供值。

我不会重复代码，因此仅告诉您为实现预期结果所做的工作。在服务器端，除了调用 RequestContext#execute()方法外，我已经完成了与以前的解决方案相同的操作。取而代之的是，我在脚本结尾处在客户端调用了 createChart函数。该脚本应如下所示:

<script type="text/javascript">

    //<![CDATA[

    var protos;
    var dataChart;
    var color;

    //other code


    //Creating the chart.
    function createChart(protosArg, dataArg, colorsArg) { 

        $(function() {

            protos = protosArg;
            dataChart = dataArg;
            colors = colorsArg;

            //other code
        });
    }

    //Updating the chart using the new supplied data.
    function changeData(protosArg, dataArg, colorsArg){

        $(function() {

            //The data are parsed
            protos = JSON.parse(protosArg);
            dataChart = eval(dataArg);
            colors = JSON.parse(colorsArg);

            //other code                
        }); 
    }

    createChart(#{chart2Controller.protos}, #{chart2Controller.data}, #{chart2Controller.colors});

    //]]>
</script>

请注意，，我还从 JSON.parse()函数中删除了 eval()和 createChart方法，因为EL已直接写入javascript代码，并且浏览器将数据正确解释为数组。

第三种解决方案

第三种解决方案基于:

通过<h:inputHidden>组件将一些值从CDI bean传递到javascript；

在客户端调用createChart函数；

在客户端调用changeChart函数。

此解决方案完全不同。一开始，我在表单中添加了三个 <h:inputHidden> componenet(每个要传递给javascript的值一个)。该表格应如下所示:

<h:form id="filterForm">

    <h:inputHidden id="protos" value="#{chart2Controller.protos}" />
    <h:inputHidden id="data" value="#{chart2Controller.data}" />
    <h:inputHidden id="colors" value="#{chart2Controller.colors}" />

    <p:selectManyCheckbox id="filter" value="#{chart2Controller.selectedKindOfNetwork}" layout="responsive" columns="4">
        <p:ajax update="filterButton" />
        <f:selectItems value="#{chart2Controller.kindOfNetwork}" var="kindOfNetwork" itemLabel="#{kindOfNetwork}" itemValue="#{kindOfNetwork}" />
    </p:selectManyCheckbox>

    <br/>

    <p:commandButton id="filterButton" value="Filtruj" action="#{chart2Controller.actionFilterButton()}"
                    disabled="#{!chart2Controller.visibilityFilterButton}"
                    update="filterForm"
                    oncomplete="changeData();"/>                

</h:form>

上面的样子，我添加了 id的 value和 <h:inputHidden>属性，并将所需的数据保存在 value属性中。

请注意，，当您按下按钮时，表单会更新(请查看 update组件的 <p:commandButton>属性)，因此，我确定每次按下时，都会下载输入的 value属性中的数据按钮。

最后，我已经通过 document.getElementById("filterForm:idOfInput").value在javascript代码中引用了这些值。请记住使用 JSON.parse()或 eval()，因为数据被解释为字符串。该脚本应如下所示:

<script type="text/javascript">

    //<![CDATA[

    var chart;

    var protos;
    var dataChart;
    var colors;

    function createChart() {    

        $(function() {  

            protos = JSON.parse(document.getElementById("filterForm:protos").value);    
            dataChart = eval(document.getElementById("filterForm:data").value);
            colors = JSON.parse(document.getElementById("filterForm:colors").value);

            //other code
        });      
    }

    function changeData(){

        $(function() {  

            protos = JSON.parse(document.getElementById("filterForm:protos").value);    
            dataChart = eval(document.getElementById("filterForm:data").value);
            colors = JSON.parse(document.getElementById("filterForm:colors").value);

            //other code
        });
    }

    //]]>
</script>

高图并更改图表数据

就我而言，我不知道每次按下按钮后会得到多少系列数据，因此有可能每次我都会获得不同系列的数据。 Highcharts API不支持这种情况。您可以在循环中结合使用 Chart.addSeries()， Series.setData()和 Series.remove()方法。如果还有更多时间，我会做，然后更新此答案。您可以在下面找到一些重新创建/更新图表的方法。

如果您不知道数据序列号。

第一个解决方案

如果您不知道要获得多少数据序列(例如在我的情况下)，则可以使用 Series.remove()删除当前数据序列，然后通过 Chart.addSeries()添加新的数据序列:

function changeData(...){

    //Preparation of the received data.

    //Removing the old data from the chart.
    for (i = 0, len = chart.series.length; i < len; i++) {

        chart.series[0].remove(false);
    }   

    //Inserting the new data to the chart.
    for (i = 0, len = protos.length; i < len; i++) {

        chart.addSeries(seriesChart[i],false);
    }

    chart.redraw(); 
}

注意，由于效率高，我为 false参数设置了 redraw。 Highcharts API说:

If doing more operations on the chart, it is a good idea to set redraw to false and call chart.redraw() after.

第二解决方案

您还可以销毁图表并重新创建它。在这种情况下，您还必须像这样更改 changeData javascript函数:

function changeData(...){

    chart.destroy();
    createChart(...);
}

如果您知道数据序列号。

这种情况比前一种情况容易。看下面的代码，不需要任何解释:

function changeData(...){

    //Preparation of the received data.

    for(var i = 0; i < chart.series.length; i++){

        chart.series[i].setData(seriesData[i],false);
    }

    chart.redraw();
}

关于javascript - 使用旧数据重新创建图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38463938/

文章推荐： powershell - 使用powershell替换文本文件中的扩展ascii字符

文章推荐： json - 如何处理REST异常？

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用旧数据重新创建图表