如何通过代码为高图形创建div容器？ [英] How to create a div container for a highcharts graphic by means of code?

问题描述

我需要为高图形创建一个div容器。这应该通过代码来完成，但我不能让它工作。

通过代码创建div的原因是因为我必须显示许多图形。

p>

目前我首先创建div，然后是id，最后是属性。

图形错误：

示例：

http：

$ b

class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  var nombre =container-speed; var div = document.createElement（'div'）; div.setAttribute（style，width： 580px; height：400px; float：left）; div.setAttribute（id，nombre）; var gaugeOptions = {chart：{type：'solidgauge'}， title：null，pane：{center：['50％'，'85％']，size：'140％'，startAngle：-90，endAngle：90，background：{backgroundColor :( Highcharts.theme&& Highcharts.theme.background2）|| '#EEE'，innerRadius：'60％'，outerRadius：'100％'，shape：'arc'}}，tooltip：{enabled：false}，yAxis：{stops：[[0.1，'＃55BF3B']， // green [0.5，'＃DDDF0D']，// yellow [0.9，'＃DF5353'] // red]，lineWidth：0，minorTickInterval：null，tickAmount：2，title：{y：-70}，labels ：{y：16}}，plotOptions：{solidgauge：{dataLabels：{y：5，borderWidth：0，useHTML：true}}}}; var chartSpeed = Highcharts.chart（nombre，Highcharts.merge（gaugeOptions，{yAxis ：{min：0，max：200，title：{text：'Speed'}}，credits：{enabled：false}，series：[{name：'Speed'，data：[80]，dataLabels：{format： <二v style =text-align：center>< span style =font-size：25px; color：'+（（Highcharts.theme&& Highcharts.theme.contrastTextColor）|| 'black'）+'> {y}< / span>< br />'+'< span style =font-size：12px; color：silver> km / h< / span> ;< / div>'，tooltip：{valueSuffix：'km / h'}}]}））;  

  .highcharts-yaxis-grid .highcharts-grid-line {display：none;}  

 < script src =https://code.highcharts.com/highcharts.js>< / script><脚本src =https://code.highcharts.com/highcharts-more.js>< / script>< script src =https://code.highcharts.com/modules/solid-gauge.js >< / script><！ - < div id =container-speedstyle =width：300px; height：200px; float：left>< / div>  - >  

非常感谢您的帮助。

解决方案

您只是缺少一个步骤，您需要在元素后追加元素你可以创建它，这是你的代码的开始：

pre code $ var nombre =container-speed;
var div = document.createElement（'div'）;
div.setAttribute（style，width：580px; height：400px; float：left）;
div.setAttribute（id，nombre ）;
//将元素附加到document.body
document.body.appendChild（div）;

另外，我更新了您的小提琴

根据您的要求，我再次更新了小提琴，我做了3次更改。其中只有一个是非常重要的。

1. 声明和值名称用作元素ID和as参数为 grafica（）
var name =chart-+ i;


2. 改变 setAttribute 改为 div.setAttribute（id，name）;


3. ***最重要的是，您在每个地方都将变量 nombre 更改为 name 这里 var chartSpeed = Highcharts.chart（name，Highcharts.merge（gaugeOptions，{... 你可以知道，我已经更新了。

I need to create a div container for a highcharts graphic. This should be done by means of code, but I can not make it work.

The reason to create divs by code is because I have to show many graphics.

Currently I first create the div, then the id and finally the properties.

Error on graphic:

Example :

http://jsfiddle.net/povyq7em/1/

My code is:

var nombre="container-speed";

var div = document.createElement('div');
div.setAttribute("style", "width: 580px; height: 400px; float: left");
div.setAttribute("id", nombre);


var gaugeOptions = {

    chart: {
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && 
            Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },


    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};


var chartSpeed = Highcharts.chart(nombre, Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 200,
        title: {
            text: 'Speed'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Speed',
        data: [80],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                   '<span style="font-size:12px;color:silver">km/h</span></div>'
        },
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]

}));

.highcharts-yaxis-grid .highcharts-grid-line {
	display: none;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<!--<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>-->

Thank you very much for your help.

解决方案

You're just missing one step. You need to append the element after you create it. Here's the beginning of your code:

var nombre="container-speed";
var div = document.createElement('div');
div.setAttribute("style", "width: 580px; height: 400px; float: left");
div.setAttribute("id", nombre);
// APPEND ELEMENT TO document.body
document.body.appendChild(div);

Also, I updated your fiddle

Per your request, I updated the fiddle once more. I made 3 changes. Only one of which were really important.

1. declare and value name to be used as element id and as argument for grafica() var name = "chart-" + i;
2. alter setAttribute to div.setAttribute("id", name);
3. ***MOST IMPORTANTLY, you changed the variable nombre to name in every place but here var chartSpeed = Highcharts.chart(name, Highcharts.merge(gaugeOptions, {... which you can tell, I've updated.

这篇关于如何通过代码为高图形创建div容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！