javascript - 如何更改 Chart.js 中使用的插值器？

Question

我一直在寻找一些关于图表库的替代品，符合我需要的是 Chart.js .但是，我不能使用它，因为 Chart.js 中使用的插值器与 Express 中的 EJS 模板中使用的相同。 , 比如 <%和 %> .

我使用了一些其他库，例如 underscore.js您可以在其中修改插值器，以防止与 Javascript 库发生任何类型的冲突。

任何帮助将不胜感激...

Answer 1

编辑: 如果它更容易，我现在将其添加到我的 chart.js 自定义构建中，您可以使用 min 或 chart.js 版本 https://github.com/leighquince/Chart.js

这可以通过更改 helpers.template 函数来完成，尽管它在尝试坚持使用函数中使用的完全相同的替换方法时确实有其局限性。可以在这里找到示例 http://jsfiddle.net/leighking2/zjztm3or/ (如果图表 js 得到更新，这也需要手动合并)

所以所做的更改(只是要突出显示我已更改的部分，而不是将整个图表 js 放在这里)

设置一个新的默认值以在模板字符串中表达所需的起点和终点(因为我们在模板函数中使用相同的替换方法 = 仍将在想要打印值时使用)

Chart.defaults = {
    global: {
        templateInterpolators: {
            start: "<%",
            end: "%>"
        },
    }
};

然后在模板助手中我们引用新对象并使用给定的开始和结束而不是像以前那样硬编码 <% 和 %>

template = helpers.template = function (templateString, valuesObject) {
            // If templateString is function rather than string-template - call the function for valuesObject
            var interpolators = Chart.defaults.global.templateInterpolators;
            if (templateString instanceof Function) {
                return templateString(valuesObject);
            }

            var cache = {};

            function tmpl(str, data) {
                // Figure out if we're getting a template, or if we need to
                // load the template - and be sure to cache the result.
                var fn = !/\W/.test(str) ? cache[str] = cache[str] :

                // Generate a reusable function that will serve as a template
                // generator (and which will be cached).
                new Function("obj",
                    "var p=[],print=function(){p.push.apply(p,arguments);};" +

                // Introduce the data as local variables using with(){}
                "with(obj){p.push('" +

                // Convert the template into pure JavaScript
                str.replace(/[\r\t\n]/g, " ")
                    .split(interpolators.start).join("\t")
                    .replace(new RegExp("((^|" + interpolators.end + ")[^\t]*)'", "g"), "$1\r")
                    .replace(new RegExp("\t=(.*?)" + interpolators.end, "g"), "',$1,'")
                    .split("\t").join("');")
                    .split(interpolators.end).join("p.push('")
                    .split("\r").join("\\'") +
                    "');}return p.join('');");

                // Provide some basic currying to the user
                return data ? fn(data) : fn;
            }
            return tmpl(templateString, valuesObject);
        },

这里的限制是新的插值器不能像给定模板时那样在其中包含 } tooltipTemplate = "{{if (label){}}{{= label }}: {{}}} {{= value }}"; 它在匹配三元组时遇到了麻烦 }}} 我的正则表达式不够好，无法弄清楚如何告诉它匹配最后一对而不是第一对，所以用这个只要避免使用 '}' 方法就可以了。

现在要使用它，您需要确保声明了您希望使用的插值器

    Chart.defaults.global.templateInterpolators = {
        start: "[[",
        end: "]]"
    };

然后设置模板，这也需要针对每个图表特定的任何图例模板进行(如果您想使用它们)

    Chart.defaults.global.scaleLabel = "[[= value ]]";
    Chart.defaults.global.tooltipTemplate = "[[if (label){]][[= label ]]: [[}]][[= value ]]";
    Chart.defaults.global.multiTooltipTemplate = "[[= value ]]";

现在您可以正常使用 Chart.js

var ctxBar = document.getElementById("chart-bar").getContext("2d");
var ctxLine = document.getElementById("chart-line").getContext("2d");
var data = {
    labels: [1, 2, 3, 4],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 34, 21, 11]
    }, ]
};




var myBarChart = new Chart(ctxBar).Bar(data);
var myLineChart = new Chart(ctxLine).Line(data);