如何为图表中的所有文本设置字体属性?

fro*_*die 4 coldfusion json styling zingchart

我有一个ZingChart(通过cfchart),它有一个外部JSON样式文件.如何为图表中的所有文本设置字体属性,如font-family,font-weight,font-size,而无需单独设置?

到目前为止我的JSON文件:

{
"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"
            }
        }
    }
  ]
}
Run Code Online (Sandbox Code Playgroud)

我知道我可以单独添加它,例如,所有scale-x"item"":

"scale-x":{
            "label":{
                "text":"Date"
            },
             "item":{ 
                "font-angle":320,
                "font-family":"Arial",
                "font-weight":"bold",
                "font-size":13
            }
        }
Run Code Online (Sandbox Code Playgroud)

但是我想为图表中的所有文本添加它.

Sta*_*fos 6

您可以使用CSS后代选择器来执行此操作.使用图表div的id和tspan元素选择器将font-family,font-weight,font-size等应用于图表中的所有文本元素.div id ="zc"的图表渲染示例:

<style>
#zc tspan { font-family: Comic Sans, Comic Sans MS, cursive !important;font-weight:bold !important;font-size:12px !important; }
</style>
Run Code Online (Sandbox Code Playgroud)

在这里演示

对不起,这是一个非CSS解决方案:

在图表JSON对象中,将"globals"对象与所需的全局属性放在根级别(与"graphset"相同的级别):

  {      
    "globals":{
      "font-size":20,
      "font-family":"Papyrus"
    },
    "graphset":[
      {
        "type":"line",
        ...
      }
    ]
  };
Run Code Online (Sandbox Code Playgroud)

这里有新的演示