我如何在一个页面上获取两张高图？ [英] how do I get two highcharts on one page?

查看：75
本文介绍了我如何在一个页面上获取两张高图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个图表，我试图在同一页面上的不同div上加载，它们很相似，但其中一个是向下钻取，另一个则不是。我曾尝试用 var chart = $（'＃review'）.hawcharts（{但它无效。



这两个图表如下： 

  $（function（）{
 var colors = Highcharts.getOptions（）。colors，
 categories = ['Metric 1'，'Metric 2'，'Metric 3'，'metric 4']，
 name ='Votes'，
 data = [{
y：1，
 color：colors [0]，
}，{
y：2，
 color：colors [1]，
 
}，{
y：3，
 color：colors [2]，
 
}，{
y：5，
颜色：颜色[3]，
 
}]; 
 
函数setChart（名称，类别，数据，颜色）{
 chart.xAxis [0] .setCategories（categories ，false）; 
 chart.series [0]卸下摆臂（假）; 
 chart.addSeries（{
 name：name，
 data：data，
 color：color ||'white'
}，false）; 
 chart.redraw（）; 
 
 $ b $ var chart = $（'＃review'）。highcharts（{
图：{
类型：'列'
}，
 title：{
 text：'Review breakdown'
}，
 xAxis：{
类别：类别
}，
 
 
 tooltip：{
 formatter：function（）{
 var point = this.point，
s = this.x +'< br>< b>'+ this。 y +'stars< / b>< br />'; 
 return s; 
} 
}，
 series：[{
 name：name， 
数据：数据，
颜色：'white'
}]，
导出：{
启用：false 
}，
图例： {
启用：false 
 }，
 
 credit：{
 enabled：false 
}，yAxis：{min：0，max：5，
 title：{text：'Star Rating' } 
} 
}）
 .highcharts（）; //返回图表
}）; 
 
 $ b $（function（）{
 var colors = Highcharts.getOptions（）。colors，
 categories = ['positive'，'negative'，'sum ']，
 name ='Votes'，
 data = [{
y：55.11，
 color：colors [0]，
 drilldown：{
名称：'正面投票'，
类别：['Users'，'Admin'，'Anonymous']，
 data：[10.85,7.35,33.06]，
 color：colors [0 ] 
} 
}，{
y：-7.15，
 color：colors [3]，
深入分析：{
 name：'Negative votes'， 
类别：['用户'，'管理员'，'匿名']，
数据：[-4.55，-1.42，-0.23]，
颜色：颜色[3] 
} 
}，{
y：2.14，
颜色：颜色[4]，
明细：{
 name：'Total votes '，
 categories：['Users'，'Admin'，'Anonymous']，
 data：[0.12,0.37,1.65]，
 color：colors [4] 
 } 
}]; 
 
函数setChart（名称，类别，数据，颜色）{
 chart.xAxis [0] .setCategories（categories，false）; 
 chart.series [0] .remove（false）; 
 chart.addSeries（{
 name：name，
 data：data，
 color：color ||'white'
}，false）; 
 chart.redraw（）; 
 
 $ b $ var chart = $（'＃votes'）。highcharts（{
图：{
类型：'列'
}，
标题：{
 text：'投票明细'
}，
副标题：{
 text：'点击列查看细分''
}， 
 xAxis：{
类别：类别
}，
 yAxis：{
 title：{
 text：'Total votes'
} 
}，
 plotOptions：{
列：{
 cursor：'pointer'，
 point：{
 events：{
 click：function （）{
 var drilldown = this.drilldown; 
 if（drilldown）{//向下钻取
 setChart（drilldown.name，drilldown.categories，drilldown.data，drilldown.color）; 
} else {//恢复
 setChart（名称，类别，数据）; 
} 
} 
} 
}，
 dataLabels：{
 enabled：true，
 color：colors [0]，
样式：{
 fontWeight：'bold'
} 
} 
} 
}，
工具提示：{
 formatter：function（） {
 var point = this.point，
s = this.x +'：< b>'+ this.y +'votes< / b>< br />'; 
 if（point.drilldown）{
 s + ='点击查看'+ point.category +'细分'; 
} else {
 s + ='点击返回'; 
} 
 return s; 
} 
}，
系列：[{
 name：name，
 data：data，
 color：'white'
}] ，
导出：{
启用：false 
}，
图例：{
启用：false 
}，
 
 ：{
启用：false 
}，
}）
 .highcharts（）; //返回图表
}）;


解决方案

页面，那么它非常简单。仅供参考，我每天都使用highcharts。如果您需要更多帮助，请随时与我联系。 （在我的电子邮件地址中查看我的个人资料）

c>< div id =chart-Aclass =chart>< / div>
< div class =spacer>< / div>
< div id =chart-Bclass =chart>< / div>

CSS - 只是为了让示例更容易一些。 

  .chart {
 height：200px; 
} 
 
 .spacer {
 height：20px;

JavaScript 

 $（function（）{
 
 //如果您需要指定任何全局设置，例如颜色或其他设置，您可以在此执行
 
 //建立图表A 
 $（'＃chart-A'）。highcharts（{
图表：{
类型：'列'
}，
 title：{
 text：'Chart A'
}，
 xAxis：{
 categories：['Jane'，'John'，'Joe'，'Jack'，' jim'] 
}，
 yAxis：{
 min：0，
 title：{
 text：'Apple Consumption'
} 
 }，
 legend：{
 enabled：false 
}，
 credits：{
 enabled：false 
}，
 tooltip：{
共享：true 
}，
系列：[{
 name：'Apples'，
 data：[5，3，8，2，4] 
}] 
}）; 
 $ b $ //建立图表B 
 $（'＃chart-B'）。highcharts（{
图表：{
类型：'列'
 }，
 title：{
 text：'Chart B'
}，
 xAxis：{
 categories：['Jane'，'John'，'Joe' ，'Jack'，'jim'] 
}，
 yAxis：{
 min：0，
 title：{
 text''Miles during Run'
 $ b $，
图例：{
启用：false 
}，
学分：{
启用：false 
}，
 tooltip：{
 shared：true 
}，
 series：[{
 name：'Miles'，
 data：[2.4，3.8，6.1， 5.3，4.1] 
}] 
}）; 
}）;

这是一个JSFiddle： http://jsfiddle.net/engemasa/7cvCX/


I have two charts that I am trying to load on separate div's on the same page, they are similar but one is a drill down and the other isn't. I have tried wrapping the entire function with var chart = $('#review').highcharts({ but it doesn't work.

The two charts are below: 

$(function () {
          var colors = Highcharts.getOptions().colors,
            categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
            name = 'Votes',
            data = [{
                    y: 1,
                    color: colors[0],
               }, {
                    y: 2,
                    color: colors[1],

                },  {
                    y: 3,
                    color: colors[2],

                },{
                    y: 5,
                    color: colors[3],

                }];

        function setChart(name, categories, data, color) {
            chart.xAxis[0].setCategories(categories, false);
            chart.series[0].remove(false);
            chart.addSeries({
                name: name,
                data: data,
                color: color || 'white'
            }, false);
            chart.redraw();
        }

        var chart = $('#review').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Review breakdown'
            },
           xAxis: {
                categories: categories
            },


            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
                             return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: false
            },
                     legend: {
            enabled: false
        },

        credits: {
            enabled: false
        },  yAxis: {min: 0, max: 5, 
                    title: {text: 'Star Rating'}
                   }
        })
        .highcharts(); // return chart
    });


$(function () {
          var colors = Highcharts.getOptions().colors,
            categories = ['positive', 'negative', 'sum'],
            name = 'Votes',
            data = [{
                    y: 55.11,
                    color: colors[0],
                    drilldown: {
                        name: 'Positive votes',
                        categories: ['Users', 'Admin', 'Anonymous'],
                        data: [10.85, 7.35, 33.06],
                        color: colors[0]
                    }
                }, {
                    y: -7.15,
                    color: colors[3],
                    drilldown: {
                        name: 'Negative votes',
                        categories: ['Users', 'Admin', 'Anonymous'],
                        data: [-4.55, -1.42, -0.23],
                        color: colors[3]
                    }
                }, {
                    y: 2.14,
                    color: colors[4],
                    drilldown: {
                        name: 'Total votes',
                        categories: ['Users', 'Admin', 'Anonymous'],
                        data: [ 0.12, 0.37, 1.65],
                        color: colors[4]
                    }
                }];

        function setChart(name, categories, data, color) {
            chart.xAxis[0].setCategories(categories, false);
            chart.series[0].remove(false);
            chart.addSeries({
                name: name,
                data: data,
                color: color || 'white'
            }, false);
            chart.redraw();
        }

        var chart = $('#votes').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Vote breakdown'
            },
            subtitle: {
                text: 'Click the columns to view breakdown.'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: 'Total votes'
                }
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                } else { // restore
                                    setChart(name, categories, data);
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +' votes</b><br/>';
                    if (point.drilldown) {
                        s += 'Click to view '+ point.category +' breakdown';
                    } else {
                        s += 'Click to return';
                    }
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: false
            },
                     legend: {
            enabled: false
        },

        credits: {
            enabled: false
        },
        })
        .highcharts(); // return chart
    });

解决方案

If you're trying to get two charts on one page then it is VERY simple. FYI, I use highcharts on a daily basis. If you need more help, feel free to contact me. (Check out my profile on stackoverflow for my email address)

HTML 

<div id="chart-A" class="chart"></div>
<div class="spacer"></div>
<div id="chart-B" class="chart"></div>

CSS - Just to make the example a little easier on the eyes

.chart {
    height: 200px;
}

.spacer {
    height: 20px;
}

JavaScript

$(function() {

    // If you need to specify any global settings such as colors or other settings you can do that here

    // Build Chart A
    $('#chart-A').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Chart A'
        },
        xAxis: {
            categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Apple Consumption'
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        tooltip: {
            shared: true
        },
        series: [{
            name: 'Apples',
            data: [5, 3, 8, 2, 4]            
        }]
    });

    // Build Chart B
    $('#chart-B').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Chart B'
        },
        xAxis: {
            categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Miles during Run'
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        tooltip: {
            shared: true
        },
        series: [{
            name: 'Miles',
            data: [2.4, 3.8, 6.1, 5.3, 4.1]
        }]
    });
});

Here's a JSFiddle: http://jsfiddle.net/engemasa/7cvCX/

这篇关于我如何在一个页面上获取两张高图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆