如何将 <div> 与使用 innerHTML 的图表一起使用答案

【问题标题】：How to use a <div> with a chart using innerHTML如何将 <div> 与使用 innerHTML 的图表一起使用
【发布时间】：2014-05-20 13:41:25
【问题描述】：

我有如下代码：

 w1.innerHTML = "<h2>" + name + "</h2><h3>Abc</h3>";

它工作正常。我想传递一个 div 而不是"<h2>" + name + "</h2><h3>Abc</h3>"; div 会显示一个图表。 div如下：

 <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

并且 div 使用以下代码显示图表：

$(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        });
    });

所以输出将是图表而不是显示文本。我怎样才能做到这一点。提前致谢。

【问题讨论】：

var w1= document.getElementById("container");
那我不明白你的问题，如果你只是想显示 highcharts，为什么不直接删除w1.innerHTML = "<h2>" + name + "</h2><h3>Abc</h3>"; 行并使用你的 highcharts 功能？
我正在尝试这样的事情：w1.innerHTML = document.getElementById('container').outerHTML;

标签： html charts innerhtml

【解决方案1】：

你想要这样的东西吗？

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://code.highcharts.com/highcharts.js"></script>

<script type='text/javascript'>
$(window).load(function(){
$('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }]
        });
});
</script>
</head>
<body>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto; border: 1px solid black;"></div>

</body>
</html>

演示 1：http://jsfiddle.net/DQGY8/

更新：

我制作了这个 Fiddle 的其他版本，希望对你有所帮助

也请看这里：

演示 3：http://jsfiddle.net/DQGY8/3

【讨论】：

不。我想传递一个 div id 而不是文本，以便 innerHTML 生成带有图表的 div。
我不明白你到底想要什么，但我尝试更新我的 JSFiddle，看看jsfiddle.net/DQGY8/1
我做了另一个更新，如果你想将特定图表分配给特定 ID：jsfiddle.net/DQGY8/2