首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >chart.renderTo不起作用

chart.renderTo不起作用
EN

Stack Overflow用户
提问于 2013-09-11 05:06:41
回答 4查看 18.3K关注 0票数 4

我试图在引导旋转木马中动态地在同一页面上创建高级图表。

我有一个像这样的函数"createChart“:

代码语言:javascript
运行
AI代码解释
复制
createChart(questiontitle, answers);

function createChart(questiontitle, answers){
    chart = new Highcharts.Chart(options); // Create new chart with general options
    chart.renderTo(container);
    for (var i = 0; i < answers.length; i++) {
        categories.push(answers[i].Text);
    }
    console.log(categories);
    chart.xAxis[0].setCategories(categories);
    chart.setTitle({ text: 'eerzera' });
    // redraw chart
    chart.redraw();
}

我有一个这样的div:

代码语言:javascript
运行
AI代码解释
复制
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

正如您所看到的,我有"chart.renderTo“,但我总是得到相同的错误:

高图表错误#13 未找到呈现div 如果chart.renderTo选项被错误地混淆了,从而无法找到要呈现图表的HTML,则会发生此错误。

我的可变选项如下:

代码语言:javascript
运行
AI代码解释
复制
var options = {
        chart: {
            type: 'bar'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]
        }]
    }

这怎麽可能?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2013-09-11 11:05:55

如果您的目标是保持这种动态,通过能够构建多个具有多个呈现的图表,但使用相同的选项,您可以这样做:

变化

代码语言:javascript
运行
AI代码解释
复制
function createChart(questiontitle, answers){
    chart = new Highcharts.Chart(options); 
    chart.renderTo(container);

至:

代码语言:javascript
运行
AI代码解释
复制
function createChart(questiontitle, answers){
    chart = $('#container').highcharts(options); 

或者,如果不使用jQuery,

代码语言:javascript
运行
AI代码解释
复制
function createChart(questiontitle, answers){
    options.chart.renderTo = 'container';
    chart = new Highcharts.Chart(options); 
票数 7
EN

Stack Overflow用户

发布于 2014-02-08 13:51:44

当您在renderTo中指定元素时,如果该元素是ID,则不应该包含该元素。

如果您有这个元素<div id="graph-container"></div>

这失败了:renderTo: '#graph-container'

这工作:renderTo: 'graph-container'

参考高图表文档

票数 5
EN

Stack Overflow用户

发布于 2013-09-11 05:22:33

类似于这样的情况:chart.renderTo(container);并不存在于高图表中。

若要设置renderTo,请使用以下选项:

代码语言:javascript
运行
AI代码解释
复制
var options = {
    chart: {
        type: 'bar',
        renderTo: 'container'
    },
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18742065

复制
相关文章
46.高级图表类型与应用
树形图 多应用于数据量大、分类层级多的图表 桑葚图 应用于数据复杂的图表 热力图 特殊时间数据 关系图 例如微博大V关注 箱线图 标靶图 词云图 地理图
hankleo
2020/09/16
4070
46.高级图表类型与应用
怎样插入图表?用图表功能可以插入不同的图表。
1、点击[插入] 2、点击[图表] 3、点击[折线图] 4、点击[确定]
裴来凡
2022/05/28
1.6K0
怎样插入图表?用图表功能可以插入不同的图表。
高级可视化 | Banber图表联动交互
实现筛选联动,首先要从数据中摘出我们所需要的图表数据,如何摘出所需要的图表数据,就需要设置条件参数,按条件参数筛选数据,而筛选组件用来控制筛选的切换展现,最终生成所需要的图表。
Banber可视化云平台
2021/05/27
2K0
Excel图表学习45: 裁剪图表
这是在chandoo.org学到的技巧。如下图1所示,在使用柱形图制作图表时,如果有些柱形表示的数字很大,可以截断该柱形,使图表看起来更美观。
fanjy
2019/07/19
2.6K0
Excel小技巧65:在单元格区域中精确放置图表
在Excel中绘制嵌入的图表时,Excel会将图表放置在合适的地方,如下图1所示。
fanjy
2020/11/06
2.3K0
Excel图表技巧07:创建滑动显示的图表
下图1是我在chandoo.org上看到的一个图表技巧。很有趣的图表显示方式,你能想到吗?
fanjy
2021/01/20
1.5K0
Excel图表技巧07:创建滑动显示的图表
图表搬家
来这里找志同道合的小伙伴! 今天给大家聊一聊Excel图表的输出! 我们日常所做的图表,如果不是专门用做Excel报表的话,大部分还是要以图片的形式导出。 通常导出到PPT的情况比较多,主要用于课堂演示、商务汇报、年终总结、产品发布会等场合! 可能大家会觉得小魔方小题大做,不就是把图表从Excel转移到PPT中嘛,我也会呀。qq截图(CTRL+ALT+A)保存然后导入PPT就OK了;或者,更简单粗暴一点的,直接将图表复制黏贴(CTRL+C/CTRL+V)到PPT里也可以哦!!! 确实没错,这样的确可以满
数据小磨坊
2018/04/10
2.3K0
图表搬家
Excel图表技巧12:为图表精确配色
有时候,我们想要在自己的图表中使用与参照图表完全一样的颜色,但参照图表是以图片形式保存的,这就需要我们得到其准确的RGB值。然而,Excel的主要功能集中于数据处理,其检测对象颜色的能力有所欠缺。此时,PowerPoint就派上用场了,它非常擅长计算对象的确切颜色,因为它有一种称为“取色器”的功能。
fanjy
2021/07/12
2.8K0
Excel图表技巧12:为图表精确配色
Excel最强图表插件EasyShu: 类别型图表
历时365天,【Excel催化剂】与【EasyShu】联手升级的Excel图表插件EasyCharts 2.0版本-EasyShu,即将面世。接下来我们会陆陆续续介绍插件的各种功能,同时内测,等内测结束就发布。我们先从与表格完美融合的类别型图表开始讲解。
数据小磨坊
2020/03/30
2.9K0
Excel最强图表插件EasyShu: 类别型图表
Excel图表技巧10:快速调整图表数据
Excel应该可以说是“智能化”的前辈,有很多的操作都可以自动“记住”,下次同样的操作就可以直接应用,非常便捷,这也是Excel强大的地方之一。我们今天介绍的技巧是通过鼠标可以快速调整图表数据,而图表自身也会作出相应的调整。
fanjy
2021/07/12
2.8K0
Excel图表技巧10:快速调整图表数据
IBCS全套图表模板无条件赠送,给图表爱好者的送上的图表盛宴
在开发EasyShu之前,Excel催化剂插件里也有数据可视化功能,并且是完全免费的。
Excel催化剂
2022/03/31
9340
IBCS全套图表模板无条件赠送,给图表爱好者的送上的图表盛宴
Excel图表技巧03:另类组合图表
通常,我们指的组合图表是在一个图表中放置不同类型的图表,例如常见的柱形图/折线图组合,如下图1所示,是由一个柱形系列和一个折线系列组成的。
fanjy
2021/01/06
1.3K0
高级可视化 | Banber图表弹窗联动交互
在利用数据简报/大屏进行图表演示时,操作者有可能要与图表进行交互联动。上一期(Banber图表联动交互)我们讲解了,如何设置下图所示,通过单击左边条形图区域,就可以交互联动右侧图表,查看事业部下属的部门具体销售情况。
Banber可视化云平台
2021/07/06
1.6K0
高级可视化 | Banber图表弹窗联动交互
图表案例——简约却不简单的图表制作技巧
我们通常看到的小而美的图表,一般都是经过图表制作者深层次加工过的成品。 而要想了解一个规范的商务图表制作过程,对图表的拆解与还原就显得非常重要。 今天的案例是关于三家电子消费业巨头:三星、苹果、华为的
数据小磨坊
2018/04/11
1.3K0
图表案例——简约却不简单的图表制作技巧
用一行Python代码创建高级财务图表
今天带大家一起学习一个小众,但很厉害的可视化库mplfinance,一起掌握最灵活的python库来创建漂亮的金融可视化。
数据STUDIO
2021/12/15
1.4K0
用一行Python代码创建高级财务图表
Excel图表技巧02:绘制动态图表
当图表数据区域中的单元格数据增加或减少时,图表会自动相应变化,这就是我们所说的动态图表。本文介绍Excel中两种基本的制作动态图表的方法。
fanjy
2021/01/06
1.4K0
用一行Python代码创建高级财务图表
今天带大家一起学习一个小众,但很厉害的可视化库mplfinance,一起掌握最灵活的python库来创建漂亮的金融可视化。
程序员小二
2021/12/25
1.3K0
用一行Python代码创建高级财务图表
Excel图表技巧14:创建专业图表——基础
引言:本文整理自exceluser.com,讲解在Excel中如何创建华尔街日报的专业图表。
fanjy
2021/07/30
3.7K0
Excel图表技巧05:自由选择想要查看的图表
有时候,我们想通过选择来控制想要显示的图表。例如下图1所示,在单元格下拉列表中选取某项后,显示对应的图表。
fanjy
2021/01/20
1.5K0
Excel图表技巧05:自由选择想要查看的图表
图表3 散点图
var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, { "gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female", "height": 160, "weight": 50 }, { "gender": "female", "height": 147.2, "weight": 49.8 },...此处省略...]
Qwe7
2022/06/15
1.1K0

相似问题

Pandoc LaTex PDF头和页脚

13

显示和隐藏页脚和页脚消息

31

上传PDF页眉和页脚

15

飞碟飞头和页脚

14

胶乳图像头和页脚

10
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档