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获得更新，则还需要手动合并）

所以已经做出了改变（只是给出我已经改变的部分的亮点而不是将整个图表放在这里）

设置一个新的默认值来表示tempalte字符串中所需的起点和终点（因为我们在模板函数中使用相同的替换方法=在想要打印值时仍然会使用）

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

然后在模板助手中我们引用新对象并使用给定的开始和结束而不是硬编码＆lt;％和％＆gt;和以前一样

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 }}";这样的模板时，它会在匹配tripple时遇到麻烦}}}我的正则表达式不足以弄清楚如何告诉它匹配最后一对而不是第一对，所以使用这种方法，只要你避免'}'你应该是好的。

现在要使用它，您需要确保声明要使用的插补器

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

然后设置tempaltes，对于每个图表特定的任何图例模板（如果你想使用它们）也需要这样做。

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

如何更改Chart.js中使用的插补器？

1 个答案: