JavaScript:如何在每次更新某个值时返回函数?
好的,这个问题可能看起来有点抽象,但让我更清楚一点。这是关于一个问题,我正试图用一个叫做ChartList的图表库来解决它。他们有一个叫做plugin的系统,在这个系统中,你可以在图表上添加一些额外的功能。现在,如何编写插件已在本文底部进行了说明。JavaScript:如何在每次更新某个值时返回函数?,javascript,chartist.js,Javascript,Chartist.js,好的,这个问题可能看起来有点抽象,但让我更清楚一点。这是关于一个问题,我正试图用一个叫做ChartList的图表库来解决它。他们有一个叫做plugin的系统,在这个系统中,你可以在图表上添加一些额外的功能。现在,如何编写插件已在本文底部进行了说明。 现在我创建了一个示例来演示这个问题。。。我面临的问题是,每当我单击下拉列表时,axisTitle中的值都不会更改… 你可能会问为什么? 原因是chartist-plugin-axisttitle.js中的这些行 (function (ro
现在我创建了一个示例来演示这个问题。。。我面临的问题是,每当我单击下拉列表时,axisTitle中的值都不会更改…
你可能会问为什么?
原因是chartist-plugin-axisttitle.js中的这些行
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], function () {
return (root.returnExportsGlobal = factory());
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like enviroments that support module.exports,
// like Node.
module.exports = factory();
} else {
root['Chartist.plugins.ctAxisTitle'] = factory();
}
}(this, function () {
/**
* Chartist.js plugin to display a title for 1 or 2 axises.
*
*/
/* global Chartist */
(function (window, document, Chartist) {
'use strict';
var axisDefaults = {
axisTitle: '',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: 0
},
textAnchor: 'middle',
flipText: false
};
var defaultOptions = {
xAxis: axisDefaults,
yAxis: axisDefaults
};
Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.ctAxisTitle = function (options) {
options = Chartist.extend({}, defaultOptions, options);
return function ctAxisTitle(chart) {
chart.on('created', function (data) {
if (!options.axisX.axisTitle && !options.axisY.axisTitle) {
throw new Error('ctAxisTitle plugin - You must provide at least one axis title');
} else if (!data.axisX && !data.axisY) {
throw new Error('ctAxisTitle plugin can only be used on charts that have at least one axis');
}
var xPos;
var yPos;
var title;
//position axis X title
if (options.axisX.axisTitle && data.axisX) {
xPos = (data.axisX.axisLength / 2) + data.options.axisX.offset + data.options.chartPadding.left;
yPos = data.options.chartPadding.top;
if (data.options.axisX.position === 'end') {
yPos += data.axisY.axisLength;
}
title = new Chartist.Svg("text");
title.addClass(options.axisX.axisClass);
title.text(options.axisX.axisTitle);
title.attr({
x: xPos + options.axisX.offset.x,
y: yPos + options.axisX.offset.y,
"text-anchor": options.axisX.textAnchor
});
data.svg.append(title, true);
}
//position axis Y title
if (options.axisY.axisTitle && data.axisY) {
xPos = 0;
yPos = (data.axisY.axisLength / 2) + data.options.chartPadding.top;
if (data.options.axisY.position === 'end') {
xPos = data.axisX.axisLength;
}
var transform = 'rotate(' + (options.axisY.flipTitle ? -90 : 90) + ', ' + xPos + ', ' + yPos + ')';
title = new Chartist.Svg("text");
title.addClass(options.axisY.axisClass);
title.text(options.axisY.axisTitle);
title.attr({
x: xPos + options.axisY.offset.x,
y: yPos + options.axisY.offset.y,
transform: transform,
"text-anchor": options.axisY.textAnchor
});
data.svg.append(title, true);
}
});
chart.on('optionsChanged', function(data){
console.log("Saras");
});
};
};
}(window, document, Chartist));
return Chartist.plugins.ctAxisTitle;
}));
如果您在options=Chartist.extend({},defaultOptions,options)的下方放置一个console.log代码>行。您将在下拉菜单单击时看到选项更改。。。但事实上,它们从未改变,除了这一次图表创建时。
现在我希望更新后的选项能够反映在return函数中,但问题是您只能返回一次
所以问题是如何在更新时反复调用ctAxisTitle
函数
那么这是一个设计缺陷吗?插件的设计是否应该改变,如果是。。。怎样??或者我可以通过某种方式操纵代码来实现功能
我还创建了一个回购协议,以便快速启动它在我看来,这是angular ChartList.js
中的一个设计缺陷。如果更改了数据或选项,则执行以下操作:
// If chart type changed we need to recreate whole chart, otherwise we can update
if (!this.chart || newConfig.chartType !== oldConfig.chartType) {
this.renderChart();
} else {
this.chart.update(this.data, this.options);
}
因此,当他们只在图表类型更改时重新提交图表时,这不是您想要的
如果您在本地拥有此文件,您可以修改该部分以满足您的需要,并始终通过使用this.renderChart()替换此行来呈现图表代码>
请参见我在上面所做的示例。您的问题的内容必须在您的问题中,而不仅仅是链接。链接会腐烂,使问题及其答案在将来对人们毫无用处,人们不应该跟随各种随机链接来帮助你。在问题的这里,清楚地说出你想做什么。显示问题中的所有相关代码(不仅仅在plunker上)。另见:这太宽了。@Reddy我明白了。。。我试图通过更新缩小范围。请查查,伙计,那工作了。。。我从来没有想过要看角度图表的内部。。。这是一个伟大的发现。。。非常感谢……:)