如何更改Chart.js中使用的插值器？ [英] How do I change the interpolator used in Chart.js?

问题描述

我一直在寻找有关图表库的一些备选方案，并且符合我需求的是 Chart.js 。但是，我不能使用它，因为Chart.js中使用的插件与 Express 的EJS模板中使用相同，像<％和％> 。

I've been looking for some alternatives regarding chart libraries and the one that fits my needs is Chart.js. However, I can't use it because the interpolators used in Chart.js are the same used in EJS templates from Express, like <% and %>.

我已经使用像 underscore.js 这样的其他库，您可以在其中修改内插器，以防止任何类型与Javascript库的冲突。

I've used some other libraries like underscore.js where you're able to modify the interpolators in order to prevent any kind of conflict with the Javascript libraries.

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

Any help would be appreciated...

推荐答案

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

if it's easier i've now added this to my custom build of chart.js you can use either the min or the chart.js version https://github.com/leighquince/Chart.js

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

This can be done by changing the helpers.template function although it does have it's limitations when trying to stick with the exact same replacing method used in the function. Example can be found here http://jsfiddle.net/leighking2/zjztm3or/ (if chart js gets update this would also need to be merged manually)

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

So changes that have been made (just going to give highlights of parts i have changed rather than placing the whole of chart js here)

设置一个新的默认值，以在tempalte字符串中表达所需的开始和结束点（因为我们使用相同的替换模板中的方法function =仍然会用于打印值时使用）

set up a new default to express desired start and end points within tempalte string (because we are using the same method of replacing within the template function = will still be used when wanting to print a value)

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

然后在模板助手中，我们引用新对象，并使用开始和结束给定而不是硬编码<％和％>如前所述

Then within the template helper we refrence the new object and use the start and end given rather than the hard codded <% and %> as before

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}}}遇到麻烦，我的正则表达式不够好，找出如何告诉它匹配最后一对不是第一对，所以使用这种方法只要你避免'}'你应该是

The limitations here are that the new interpolators can not have } in them as when given a template like tooltipTemplate = "{{if (label){}}{{= label }}: {{}}}{{= value }}"; it runs into trouble when matching the tripple }}} and my regex is not good enough to figure out how to tell it to match the last pair not the first pair, so with this method as long as you avoid '}' you should be good.

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

Now to use it you will need to ensure you declare the interpolators you wish to use

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

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

then setup up the tempaltes, this will also need to happen for any legend templates that are specific to each graph (if you want to use them)

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

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

and now you can just use Chart.js as normal

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中使用的插值器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！