在wordpress頁面中使用javascript

Question

我有一個腳本，用戶可以輸入1到10的值，然後在雷達圖上顯示結果。

I have a demo of the it working HERE on codepen 有些JS：

var radarChartData = { 
    labels: ["OPTION - 1", "OPTION - 2", "OPTION - 3", "OPTION - 4", "OPTION - 5", "OPTION - 6", "OPTION - 7", "OPTION - 8", "OPTION - 9", "OPTION - 10", "OPTION - 11", "OPTION - 12"], 
    datasets: [ 
     { 
      label: "Wheel Of Life", 
      fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(255,153,0,1)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(255,153,0,1)", 
      data: [10,10,10,10,10,10,10, 10, 10, 10,10, 10] 
     } 

    ] 
}; 

//This is the function that renders the chart for the first time 
    window.onload = function(){ 
    window.myRadarChart = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, { 
     responsive: true 
    }); 


} 

//For Every Change of value this is the function that renders the chart. All the actions have to be attached to this function. That should be pretty much it. 
    function runSubmitFunction() { 
    //myRadarChart.datasets[0].points[0].value = 
    var datalist = document.getElementById ("browsers"); 
myRadarChart.datasets[0].points[0].value = document.getElementById ("data1").value; 
    myRadarChart.datasets[0].points[1].value = document.getElementById ("data2").value; 
    myRadarChart.datasets[0].points[2].value = document.getElementById ("data3").value; 
myRadarChart.datasets[0].points[3].value = document.getElementById ("data4").value; 
    myRadarChart.datasets[0].points[4].value = document.getElementById ("data5").value; 
    myRadarChart.datasets[0].points[5].value = document.getElementById ("data6").value; 
    myRadarChart.datasets[0].points[6].value = document.getElementById ("data7").value; 
    myRadarChart.datasets[0].points[7].value = document.getElementById ("data8").value; 
    myRadarChart.datasets[0].points[8].value = document.getElementById ("data9").value; 
    myRadarChart.datasets[0].points[9].value = document.getElementById ("data10").value; 
    myRadarChart.datasets[0].points[10].value = document.getElementById ("data11").value; 
    myRadarChart.datasets[0].points[11].value = document.getElementById ("data12").value; 
    myRadarChart.update(); 
    } 

我已經嘗試了不少東西在WordPress，但不能讓它的工作（在header.php中引用chart.js之，品種衆多張貼的代碼從demo.html到wordpress頁面等）。

Answer 1

您必須通過使用下面的函數將您的chart.js文件包含在wordpress主頁的頭部分中。您必須在您的function.php文件中編寫此函數，以便它包含此chart.js文件主頁面標題，以便從任何地方訪問。

function wps_poll_options_page() { 

wp_enqueue_script(
     'getChart', // name your script so that you can attach other scripts and de-register, etc. 
     get_template_directory_uri() . '/js/chart.js', // this is the location of your script file 
     array('jquery') // this array lists the scripts upon which your script depends 
    );