charts - hig - zingchart examples
Problema con la información sobre herramientas de ZingChart cuando mi hoja de estilo tiene tÃtulo (1)
Coloque esto en su elemento <head>:
<style title="zingchart"></style>
Esto obligará a ZingChart a inyectar sus propios estilos en ese elemento, evitando conflictos.
Estoy en el equipo de ZingChart, por favor, avíseme si necesita algo más :)
Editar:
Aparentemente, los navegadores implementan el concepto de hojas de estilo "preferidas", con la idea de que si en una página tienes:
<link rel="stylesheet" title="A">
<link rel="stylesheet" title="B">
... solo se usará el estilo de un elemento CSS, el otro se ignorará. Lo mismo ocurre con las etiquetas en línea.
El problema es que ZingChart crea dinámicamente sus propias reglas de CSS e inyecta una etiqueta con title = "zingchart". Entonces, cuando en la página HTML hay otro <style> o <link> con un "título" diferente, uno de ellos (muy probablemente el estilo ZingChart) será ignorado.
Hemos eliminado el código que establece el "título" de nuestro código, que estará disponible en nuestro próximo lanzamiento público. Mientras tanto, necesitarás eliminar el atributo "título" de tu elemento <style>.
Estoy haciendo una prueba de concepto para ver si ZingCharts es una solución viable en nuestra aplicación web. Intento crear un gráfico de barras apiladas simple. Todo funciona bien en mi ejemplo hasta que agregue un título a mi etiqueta de estilo, title = "mystyle". Estoy usando el título en la etiqueta de estilo ya que esto modela la situación en nuestra aplicación completa donde incluimos una cantidad de archivos css, todos titulados con nuestro estilo de página personalizado.
Aquí está mi código de ejemplo ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello ZingChart World</title>
<style title="mystyle">
.h1 {
margin: 0 0 1px 0;
padding: 5px 7px 7px 7px;
font-size: 11px;
font-weight: bold;
background-color: #ceceb5;
border-color:#ffffff #ffffff #998B74 #ffffff;
border-width:0px 0px 2px 0px;
border-style:solid solid ridge solid;
}
table.fullTable {
width: 100%;
}
td.jsChartSection {
text-align: center;
border: 1px solid #888888;
background-color: #EFEFEF;
padding: 10px 20px 10px;
}
</style>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script>
var chartData={
"type": "bar",
"stacked":true,
"stack-type":"normal",
"backgroundColor":"#FFF0FF",
"hoverMode":"node",
"tooltip": {
"htmlMode":false
},
"legend":{
"align":"center",
"vertical-align":"bottom"
},
"plotarea": {
"width": ''100%'',
"height": ''100%'',
"margin": ''20 20 50 70''
},
"scale-x":{
"values":["2009","2010","2011","2012","2013", "2014"],
"items-overlap":true,
"item":{
"font-angle":-45,
"auto-align":true
}
},
"scale-y":{
"label":{
"text":"# of Widgets"
},
"values": [-100,0,100,200,300,400,500,600,700,800,900,1000,1100]
},
"series": [
{ "values": [909, 579, 311, 275, 683, 921 ], "stack":1, "text":"Widget Increase", "background-color":"#404090" },
{ "values": [-95, -59, -32, -20, -65, -98 ], "stack":1, "text":"Widget Decrease", "background-color":"#008C50" }
]
};
window.onload=function(){
zingchart.render({
id:''chartDiv'',
height:"320",
width:"100%",
data:chartData
});
};
</script>
</head>
<body>
<div class="h1">Chart Management with Zingcharts</div>
<div class="h1">Another div element</div>
<div class="h1">And another div element</div>
<div class="h1">And yet another div element</div>
<div class="databox">
<table cellspacing="5" class="fullTable">
<tr>
<td class="jsChartSection">
<div>
<div id=''chartDiv''></div>
</div>
</td>
</tr>
</table>
<!-- databox -->
</div>
<!-- Content -->
</body>
</html>
Cuando hago esto en este ejemplo, causa un problema con el siguiente elemento img que genera ZingChart ...
<img id="chartDiv-img" class="zc-img" usemap="#chartDiv-map" style="position: absolute; border-width: 0px; width: 1825px; height: 320px; left: 0px; top: 0px; z-index: 0; opacity: 0; clip: rect(1px, 1824px, 319px, 1px);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==">
Este elemento se coloca en la esquina superior izquierda de mi página, y la información sobre herramientas ahora se comporta de manera extraña.
¿Cómo puedo hacer que ZingChart funcione correctamente mientras sigo usando mi estilo de página personalizado?
¡Gracias!