Question

第一个脚本不起作用，第二个脚本是。

<script type="text/javascript">
    var pageHits = [30,60,22,5,60,88,102];
    var rssHits = [33,45,121,23,55,35,77];
    var xAxis = ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'];


    jQuery(function() {

        $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());

        $('#barChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateBarChartOptions());
        });
        $('#lineChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
        });
        $('#stackedBarChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateStackedBarChartOptions());
        });
    });

    function CreateLineChartOptions()
    {
        var optionsObj = {
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            seriesDefaults:{
                markerOptions:{
                    show: true,
                    style: 'diamond'
                }
            },
            legend: {
                show: true,
                location: 'nw'
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }   
        };
        return optionsObj;
    }

    function CreateBarChartOptions()
    {
        var optionsObj = {
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            legend: {
                show: true,
                location: 'nw'
            },
            seriesDefaults:{
                shadow: true,
                renderer:$.jqplot.BarRenderer,
                rendererOptions:{
                   barPadding: 8,
                   barMargin: 10
               }
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }
        };
        return optionsObj;
    }

    function CreateStackedBarChartOptions()
    {
        var optionsObj = {
            stackSeries: true,
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            legend: {
                show: true,
                location: 'nw'
            },
            seriesDefaults:{
                shadow: true,
                renderer:$.jqplot.BarRenderer
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }
        };
        return optionsObj;
    }   
</script>
<script language="javascript">
    jQuery("#red").treeview({
     animated: "fast",
     collapsed: true,
     control: "#treecontrol",
     }
    });
</script>

第一个脚本用于可折叠树，第二个脚本用于图表..当单独执行时输出很好但是当我尝试在一个页面中实现两者时，树没有正确生成但图表没问题。

Answer 1

看看这个：

jQuery(function() {

        $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
        /*......*/
        });

如果你想在使用jQuery.noConflict()时使用美元符号来访问函数内的jQuery，你需要将$ as参数传递给函数：

jQuery(function($) {

            $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
            /*......*/
            });

当使用jQuery.noConflict（）时，您还需要使用 jQuery 替换CreateLineChartOptions（），CreateBarChartOptions（）和CreateStackedBarChartOptions（）中的所有 $ 。没有全局变量$指向jQuery，这就是问题。

所以这个编辑过的版本应该有效：

    var pageHits = [30,60,22,5,60,88,102];
    var rssHits = [33,45,121,23,55,35,77];
    var xAxis = ['Jan 2009', 'Feb 2009', 'Mar 2009', 'Apr 2009', 'May 2009', 'June 2009', 'Jul 2009'];


    jQuery(function($) {

        $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());

        $('#barChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateBarChartOptions());
        });
        $('#lineChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateLineChartOptions());
        });
        $('#stackedBarChartButton').click(function() {
            $('#chartDiv').html('');
            $.jqplot('chartDiv', [pageHits, rssHits], CreateStackedBarChartOptions());
        });
    });


    function CreateLineChartOptions()
    {
        var optionsObj = {
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: jQuery.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            seriesDefaults:{
                markerOptions:{
                    show: true,
                    style: 'diamond'
                }
            },
            legend: {
                show: true,
                location: 'nw'
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }   
        };
        return optionsObj;
    }

    function CreateBarChartOptions()
    {
        var optionsObj = {
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: jQuery.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            legend: {
                show: true,
                location: 'nw'
            },
            seriesDefaults:{
                shadow: true,
                renderer:jQuery.jqplot.BarRenderer,
                rendererOptions:{
                   barPadding: 8,
                   barMargin: 10
               }
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }
        };
        return optionsObj;
    }

    function CreateStackedBarChartOptions()
    {
        var optionsObj = {
            stackSeries: true,
            title: 'Blog Statistics',
            axes: {
                 xaxis: {
                    renderer: jQuery.jqplot.CategoryAxisRenderer,
                    ticks: xAxis
                }
            },
            series: [{label:'Page Hits'}, {label: 'RSS Hits'}],
            legend: {
                show: true,
                location: 'nw'
            },
            seriesDefaults:{
                shadow: true,
                renderer:jQuery.jqplot.BarRenderer
            },
            highlighter: {
                showTooltip: true,
                tooltipFade: true
            }
        };
        return optionsObj;
    }   
</script>

jQuery noconflict（）无效

1 个答案: