Tengo un ZingChart (a través de cfchart) que tiene un archivo de estilo JSON externo. ¿Cómo puedo establecer atributos de fuente, como familia de fuentes, peso de fuente, tamaño de fuente para todo el texto en el gráfico, sin configurarlo individualmente?

Mi archivo JSON hasta ahora:

{
"graphset":[
    {       
        "background-color":"white",
        "font-family":"Courier New",
        "scale-x":{
            "label":{
                "text":"Date"
            }
        },
        "scale-y":{
            "label":{
                "text":"Score"
            },
            "markers":[
                {
                    "type":"line",
                    "range":[75,76],
                    "line-color":"red"
                },
                {
                    "type":"line",
                    "range":[50,51],
                    "line-color":"yellow"
                }
            ]
        },
        "tooltip" : {
            "text" : "Score of %v on %k",
            "background-color" : "#ff9900"
        },
        "plot":{
            "marker":{
                "type":"square"
            }
        }
    }
  ]
}

Sé que puedo agregarlo individualmente para, digamos, todos los "elementos" de scale-x:

"scale-x":{
            "label":{
                "text":"Date"
            },
             "item":{ 
                "font-angle":320,
                "font-family":"Arial",
                "font-weight":"bold",
                "font-size":13
            }
        }

Pero quiero agregarlo para todo el texto del gráfico.

4
froadie 12 feb. 2015 a las 20:27

2 respuestas

La mejor respuesta

Puede usar selectores descendientes de CSS para hacer esto. Use el ID de div de su gráfico y el selector de elementos tspan para aplicar font-family, font-weight, font-size, etc., a todos los elementos de texto en un gráfico. Ejemplo de representación de un gráfico en div id = "zc":

<style>
#zc tspan { font-family: Comic Sans, Comic Sans MS, cursive !important;font-weight:bold !important;font-size:12px !important; }
</style>

Demo aquí

Perdón por la confusión, aquí hay una solución sin CSS:

Dentro de su objeto JSON de gráfico, coloque el objeto "globales" con los atributos globales deseados en el nivel raíz (el mismo nivel que "conjunto de gráficos"):

  {      
    "globals":{
      "font-size":20,
      "font-family":"Papyrus"
    },
    "graphset":[
      {
        "type":"line",
        ...
      }
    ]
  };

Nueva demostración aquí

6
Stalfos 12 feb. 2015 a las 21:48

También puede seleccionar todos los elementos de la página con el * (carácter comodín)

Por ejemplo:

* { font-family: Comic Sans, Comic Sans MS, cursive !important;font-weight:bold !important;font-size:12px !important; }
-1
Ally Ripp 12 feb. 2015 a las 19:11