Javascript ChartJS问题/Wordpress

我对ChartJS有意见。我想将图表添加到我网站的不同区域，我已经能够让它与一个图表一起工作，但现在我尝试添加一个单独的图表（它甚至与第一个图表不在同一页上），它根本不会加载。这是最奇怪的事

以下是我的图表脚本：

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 ));

---

你检查过Wordpress提供的信息源了吗？可能有一个缓存的javascript文件没有你的新代码，我有。一切似乎都很好。这太奇怪了。你能为这个网站共享一个公共URL吗？很遗憾，我不能。但是我可以让你知道，我刚刚做了一些其他的测试，这似乎是因为有第二个图表。我删除了第一个图表代码（不是数据或选项），第二个工作正常。由于某种原因，这些图表似乎相互矛盾。我还应该注意，我正在调用一个JS文件，脚本并没有嵌入到实际的页面代码中；它在外部和Dom上被调用