如何在wordpress中包含jqplot?

时间:2017-12-04 06:46:18

标签: javascript jquery wordpress jqplot

我正在开发插件,其中我使用jqplot作为条形图,我已经完成了他们在documentaion中告诉他们的方式,但是在wordpress中它不起作用,但它在普通的php中工作,下面是我的代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jquery.jqplot.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jqplot.pieRenderer.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="<?php echo WP_PLUGIN_URL; ?>/js/jqplot.pointLabels.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo WP_PLUGIN_URL; ?>/css/jquery.jqplot.css" />
<script>
$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10];
        var ticks = ['a', 'b', 'c', 'd'];
         
        plot1 = $.jqplot('chart1', [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            },
            highlighter: { show: false }
        });
     
        $('#chart1').bind('jqplotDataClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        );
    });
    </script>
<div id="chart1" style="height:400px;width:300px; "></div>

1 个答案:

答案 0 :(得分:0)

您应该了解如何正确enqueue scripts以确保符合相关性。在你的情况下,这是我如何排队第一个脚本,jquery应该已经被WordPress加载,除非你已经删除它。此外,将您的所有脚本移动到您的子主题目录下,就像我在下面所做的那样。或者创建一个合适的插件并将它们嵌套在不在root插件目录下面,就像你已经完成的那样。

function wpb_adding_scripts() {
     wp_register_script('jqplot', get_template_directory_uri() . '/js/jquery.jqplot.js', array('jquery'),'1.1', true);
     wp_enqueue_script('jqplot');
}


add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );