ChartJS问题/ Wordpress

Question

我遇到了ChartJS的问题。我想要将图表添加到我网站的不同区域，并且我已经能够将其用于一个图表，但现在我尝试添加一个单独的图表（这不是＆＃39 ;甚至与第一页在同一页面上，它根本不会加载。这是最奇怪的事情。

这是我的图表脚本：

var wins = $("#wins").text();
var losses = $("#losses").text();
var draws = $("#draws").text();
var winsstrike = $("#wins-strike").text();
var winsgrapple = $("#wins-grapple").text();
var winssubmit = $("#wins-submit").text();
var winsother = $("#wins-other").text();

var recorddata = [{
        value: 1*wins,
        color: "#eb3f3d",
        label: "Wins"
    }, {
        value: 1*losses,
        color: "#ec582a",
        label: "Losses"
    }, {
        value: 1*draws,
        color: "#f8a430",
        label: "Draws"
    }

    ]

    var recordoptions = {
        animation: true,
        segmentShowStroke : true,
        segmentStrokeColor : "#191919",
        percentageInnerCutout : 70

    };

var winsdata = [{
        value: 1*winsstrike,
        color: "#eb3f3d",
        label: "Strike"
    }, {
        value: 1*winsgrapple,
        color: "#E82521",
        label: "Grappling"
    }, {
        value: 1*winssubmit,
        color: "#CB1815",
        label: "Submission"
    }, {
        value: 1*winsother,
        color: "#A61411",
        label: "Other"
    }

    ]

    var winsoptions = {
        animation: true,
        segmentShowStroke : true,
        segmentStrokeColor : "#191919",
        percentageInnerCutout : 90
    };

    var c = $('#recordChart');
    var ct = c.get(0).getContext('2d');
    var ctx = document.getElementById("recordChart").getContext("2d");
    myNewChart = new Chart(ct).Doughnut(recorddata, recordoptions);

    var c1 = $('#winsbyChart');
    var ct1 = c1.get(0).getContext('2d');
    var ctx1 = document.getElementById("winsbyChart").getContext("2d");
    myNewChart1 = new Chart(ct1).Doughnut(winsdata, winsoptions);

我不知道为什么他们不会工作;第一张图表，发布#recordChart完美无瑕，但第二张没有。我知道代码很好，因为我为它建立了一个小提琴。我只是无法弄清楚为什么它会在第二张图表上工作（#winsbyChart）。

我看不到的图表之间是否存在冲突？这真是令人沮丧。

更新： 我删除了第一个图表调用（不是选项或数据），第二个出现了。他们似乎在某种程度上相互冲突。我也在调用外部JS文件;脚本没有嵌入我的代码中。下面是整个JS脚本 - 专门用于这些图表。也许这与我如何设置脚本文件有关？

(function( root, $, undefined ) {
    "use strict";

    $(function () {
        // DOM ready, take it away

var wins = $("#wins").text();
var losses = $("#losses").text();
var draws = $("#draws").text();
var winsstrike = $("#wins-strike").text();
var winsgrapple = $("#wins-grapple").text();
var winssubmit = $("#wins-submit").text();
var winsother = $("#wins-other").text();

var recorddata = [{
        value: 1*wins,
        color: "#eb3f3d",
        label: "Wins"
    }, {
        value: 1*losses,
        color: "#ec582a",
        label: "Losses"
    }, {
        value: 1*draws,
        color: "#f8a430",
        label: "Draws"
    }

    ]

    var recordoptions = {
        animation: true,
        segmentShowStroke : true,
        segmentStrokeColor : "#191919",
        percentageInnerCutout : 80

    };

var winsdata = [{
        value: 1*winsstrike,
        color: "#eb3f3d",
        label: "Strike"
    }, {
        value: 1*winsgrapple,
        color: "#E82521",
        label: "Grappling"
    }, {
        value: 1*winssubmit,
        color: "#CB1815",
        label: "Submission"
    }, {
        value: 1*winsother,
        color: "#A61411",
        label: "Other"
    }

    ]

    var winsoptions = {
        animation: true,
        segmentShowStroke : true,
        segmentStrokeColor : "#191919",
        percentageInnerCutout : 80
    };



    var c = $('#recordChart');
    var ct = c.get(0).getContext('2d');
    var ctx = document.getElementById("recordChart").getContext("2d");
    myNewChart = new Chart(ct).Doughnut(recorddata, recordoptions);

    var c1 = $('#winsbyChart');
    var ct1 = c1.get(0).getContext('2d');
    var ctx1 = document.getElementById("winsbyChart").getContext("2d");
    myNewChart1 = new Chart(ct1).Doughnut(winsdata, winsoptions);


    });

} ( this, jQuery ));