在单个网页上pipe理多个折线图
我有一个单一的网页中有多个types（酒吧，派，散点图types）的高图。 目前我正在为每个graphics创buildconfiguration对象，
{ chart : {}, blah blah, } 并把它们喂给一个自定义的函数，它将调用HighCharts.chart() 。 但是这会导致代码的重复。 我想集中pipe理所有这些图表渲染逻辑。
任何想法如何做到这一点？
你可以使用jQuery.extend()和Highcharts.setOptions 。
所以，首先你要创build第一个将被所有图表扩展的对象，这个对象将包含你的Highchart默认函数。
你可以使用命名空间来做到这一点。
当你有非常不同的图表时，以下方法是很好的。
默认graphics：
var defaultChart = { chartContent: null, highchart: null, defaults: { chart: { alignTicks: false, borderColor: '#656565', borderWidth: 1, zoomType: 'x', height: 400, width: 800 }, series: [] }, // here you'll merge the defauls with the object options init: function(options) { this.highchart= jQuery.extend({}, this.defaults, options); this.highchart.chart.renderTo = this.chartContent; }, create: function() { new Highcharts.Chart(this.highchart); } };
现在，如果你想制作一个柱形图，你会扩展defaultChart
var columnChart = { chartContent: '#yourChartContent', options: { // your chart options } }; columnChart = jQuery.extend(true, {}, defaultChart, columnChart); // now columnChart has all defaultChart functions // now you'll init the object with your chart options columnChart.init(columnChart.options); // when you want to create the chart you just call columnChart.create();
如果您有类似的图表，可以使用Highcharts.setOptions ，在此之后将应用所有创build的图表的选项。
// `options` will be used by all charts Highcharts.setOptions(options); // only data options var chart1 = Highcharts.Chart({ chart: { renderTo: 'container1' }, series: [] }); var chart2 = Highcharts.Chart({ chart: { renderTo: 'container2' }, series: [] });
参考
完整的演示
我知道这已经被回答了，但我觉得可以进一步采取。 我对JavaScript和jQuery仍旧陌生，所以如果有人发现任何错误，或者认为这种方法违反了某种指南或者经验法则，我会很感激反馈。
基于Ricardo Lohmann所描述的原则，我创build了一个jQuery插件，在我看来，它允许Highcharts与jQuery（即jQuery与其他HTML对象一起工作的方式）更加无缝地工作。
我从来不喜欢在绘制图表之前必须提供对象ID给Highcharts的事实。 所以使用插件，我可以将图表分配给标准的jQueryselect器对象，而不必为包含<div>的id值赋予值。
(function($){ var chartType = { myArea : { chart: { type: 'area' }, title: { text: 'Example Line Chart' }, xAxis: { /* xAxis settings... */ }, yAxis: { /* yAxis settings... */ }, /* etc. */ series: [] }, myColumn : { chart: { type: 'column' }, title: { text: 'Example Column Chart' }, xAxis: { /* xAxis settings... */ }, yAxis: { /* yAxis settings... */ }, /* etc. */ series: [] } }; var methods = { init: function (chartName, options) { return this.each(function(i) { optsThis = options[i]; chartType[chartName].chart.renderTo = this; optsHighchart = $.extend (true, {}, chartType[chartName], optsThis); new Highcharts.Chart (optsHighchart); }); } }; $.fn.cbhChart = function (action,objSettings) { if ( chartType[action] ) { return methods.init.apply( this, arguments ); } else if ( methods[action] ) { return methods[method].apply(this,Array.prototype.slice.call(arguments,1)); } else if ( typeof action === 'object' || !action ) { $.error( 'Invalid arguments to plugin: jQuery.cbhChart' ); } else { $.error( 'Action "' + action + '" does not exist on jQuery.cbhChart' ); } }; })(jQuery);
有了这个插件，我现在可以分配一个图表如下：
$('.columnChart').cbhChart('myColumn', optionsArray);
这当然是一个简单的例子。 作为一个真实的例子，你必须创build更复杂的图表属性。 但这是我们在这里关心的原则，我发现这个办法解决了原来的问题。 它重新使用代码，同时仍然允许单独的图表更改逐渐应用于对方。
原则上，它也允许您将多个Ajax调用组合在一起，将每个graphics的选项和数据推送到一个JavaScript数组中。
强制性的jFiddle例子在这里： http : //jsfiddle.net/3GYHg/1/
批评欢迎！
为了增加@李嘉图的伟大答案，我也做了一些非常相似的事情。 事实上，如果我说我比这更进一步，我不会错的。 因此，希望分享这个方法。
我已经在高图书馆上创build了一个包装器。 这给了多种好处，继之以鼓励走在这条道路上的主要优势
- 解耦：将你的代码从高层解开
- 轻松升级：这个包装将是唯一的代码，将需要修改的情况下，如果升级后的highchart api发生任何重大变化，或者甚至决定完全转移到不同的图表库（即使从高图到高库可以是详尽的，如果你的应用程序广泛使用图表）
- 易于使用：包装API保持非常简单，只有可能会有所不同的东西被暴露为选项（这也不会像HC已经有深层的js对象，大多是1级深），每个都有一个默认的值。 所以大部分时间我们的图表创build非常短，构造函数只带有1个
options对象，只有4-5个属性的默认值不适合创build图表 - 一致的UX：整个应用程序的一致的外观和感觉。 例如：工具提示格式和位置，颜色，字体系列，颜色，工具栏（导出）button等
- 避免重复：当然，作为被问题的有效答案，它必须避免重复，并且在很大程度上也是如此
以下是options的默认值
defaults : { chartType : "line", startTime : 0, interval : 1000, chartData : [], title : "Product Name", navigator : true, legends : true, presetTimeRanges : [], primaryToolbarButtons : true, secondaryToolbarButtons : true, zoomX : true, zoomY : false, height : null, width : null, panning : false, reflow : false, yDecimals : 2, container : "container", allowFullScreen : true, credits : false, showAll : false, fontSize : "normal", // other option available is "small" showBtnsInNewTab : false, xAxisTitle : null, yAxisTitle : null, onLoad : null, pointMarkers : false, categories : [] }
正如你所看到的，大多数情况下，其正好的chartData发生了变化。 即使你需要设置一些属性，它主要是真正的/错误的types，没有像高build设者期望的恐怖（不批评他们，他们提供的选项的数量是惊人的定制视angular，但对于每个开发人员要了解和掌握它的团队可能需要一些时间）
所以创build图表就像
var chart=new myLib.Chart({ chartData : [[1000000,1],[2000000,2],[3000000,1],[4000000,5]] });
