2015-02-12 2 views
4

У меня есть 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" 
      } 
     } 
    } 
    ] 
} 

Я знаю, что я могу добавить его отдельно, скажем, все масштабно-х "пункт" S ":

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

Но я хочу добавьте его для всего текста в диаграмме.

ответ

6

Для этого вы можете использовать селекторы CSS-потомков. Используйте идентификатор диаграммы div и селектор элементов tspan, чтобы применить шрифт-семейство, шрифт-вес, размер шрифта и т. д. ., ко всем текстовым элементам в диаграмме. Пример диаграммы вынести на Div ID = "гс":

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

Demo here

Извините за путаницу, вот не-CSS решение:

В вашей диаграммы объекта JSON, поместите " глобал»объект с требуемыми глобальными атрибутами в корневом уровне (такой же уровень, как„graphset“):

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

New demo here

+0

Я предполагаю, что я не сделал этого достаточно ясно - это стиль файл ZingChart. Мне нужны параметры ZingChart, а не CSS. Я обновлю свой пост. – froadie

+0

froadie, я обновил свой ответ за ya. – Stalfos

+0

Я делаю это через cfchart, поэтому я не уверен, как включить этот код. У меня есть '', а затем код, который я разместил в файле myStyles.js. Где бы я поместил код темы? – froadie

-1

Вы также можете выбрать все элементы на странице с * (групповым символом)

Например:

* { font-family: Comic Sans, Comic Sans MS, cursive !important;font-weight:bold !important;font-size:12px !important; } 
+1

Немного больше объяснений о том, почему/как это работает, приведет меня (и, возможно, других) к тому, чтобы он мог поддержать этот ответ. – Pseudonym

+0

Это символ дикой карты, который выбирает все элементы. Он используется в качестве селектора CSS. http://www.w3schools.com/cssref/css_selectors.asp –

+0

Хорошо, но OP и [комментарии] (http://stackoverflow.com/questions/28483919/how-to-set-font-attributes-for- all-text-in-a-chart # comment45295732_28485736) указывают, что они искали настройки диаграмм Zing, а не CSS. – Leigh

Смежные вопросы