在单个网页上管理多个折线图 [英] Manage multiple highchart charts in a single webpage

问题描述

我在单个网页中有多种不同类型的图表（酒吧，派，散点图类型）。目前，我正在为每个图形创建配置对象，例如，

  {
图表：{}，
等等然后将它们馈送到一个自定义函数中，该函数只需调用<$ c  
 
 
 
 $ b 
 $ C> HighCharts.chart（）。但是这会导致代码的重复。我想集中管理所有这些图表渲染逻辑。
 
 
 
关于如何做到这一点的任何想法？ 
 
解决方案 
您可以使用 jQuery.extend（）和 Highcharts.setOptions 。 > 
因此，首先您将创建第一个将由所有图表扩展的对象，此对象将包含您的Highchart默认函数。
 
 
 
您可以执行它使用命名空间。
 
 当你有非常不同的图表时，以下方法是很好的。 
 
 
 
默认图形： p> 
 
 
  var defaultChart = {
 chartContent：null，
 highchart：null，
 defaults：{
 
图：{
 alignTicks：false，
 borderColor：'＃656565'，
 borderWidth：1，
 zoomType：'x'，
高度：400，
宽度：800 
}，
 
系列：[] 
 
}，
 
 //这里你将默认值与对象选项合并
 
 init：function（options）{
 
 this.highchart = jQuery.extend（{}，this.defaults ，选项）; 
 this.highchart.chart.renderTo = this.chartContent; 
}，
 
 create：function（）{
 
 new Highcharts.Chart（this.highchart）; 
} 
 
}; 
  
现在，如果您想制作一个柱形图表，您可以扩展defaultChart 
  var columnChart = {
 
 chartContent：'#yourChartContent'，
 options：{
 
 //您的图表选项
} 
 
}; 
 
 columnChart = jQuery.extend（true，{}，defaultChart，columnChart）; 
 
 //现在columnChart具有所有的defaultChart函数
 
 //现在，您将使用图表选项初始化对象
 
 columnChart.init（columnChart可供选项）; 
 
 //当您想创建图表时，您只需调用
 
 columnChart.create（）; 
  
 如果您有类似的图表，请使用 Highcharts.setOptions 它将在这之后应用所有创建的图表的选项。 
  //`options` will will被所有图表使用
 Highcharts.setOptions（options）; 
 
 //只有数据选项
 var chart1 = Highcharts.Chart（{
图表：{
 renderTo：'container1'
}，
系列：[] 
}）; 
 
 var chart2 = Highcharts.Chart（{
图表：{
 renderTo：'container2'
}，
系列：[] 
 }）; 
  
 参考  
 
 
 
  http://api.highcharts.com/highcharts#Highcharts.setOptions ％28％29  
 
 
 
 
 
  完整演示  
 
I am having multiple highchart charts of various types(Bar,Pie, Scatter type) in a single web page. Currently I am creating config object for each graph like,
{
chart : {},
blah blah,
}
And feeding them to a custom function which will just call HighCharts.chart(). But this results in duplication of code. I want to manage all this chart rendering logic centrally.

Any Idea on how to do this?
解决方案
You can use jQuery.extend() and Highcharts.setOptions.

So first you'll make the first object which will be extended by all your charts, this object will contain your Highchart default functions.

You can do it using namespacing.

The following way is good when you have very different charts.

Default graphic:
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);
    }

};
Now, if you want to make a column chart, you'll extend 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();
If you have similar charts use Highcharts.setOptions which will apply the options for all created charts after this.
// `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: []
});
Reference


http://api.highcharts.com/highcharts#Highcharts.setOptions%28%29


COMPLETE DEMO

                        
这篇关于在单个网页上管理多个折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！