2017-03-03 1 views
1

私はいくつかのCSSスタイルをZingChartコンテキストメニューに追加しようとしていますが、デフォルトのインラインスタイルがそれらをオーバーライドしています。コンテキストメニューのすべてのスタイルをクリアすることは可能ですか?ZingChartコンテキストメニュースタイルの問題

答えて

2

現在、スタイルを消去する方法はありません。 JSON syntaxで調整できます。 CSSを使用する必要がある場合。私はこれが唯一の選択肢ではありません期待していたコンテキストメニューのスタイルに

var myTheme = { 
 
    palette:{ 
 
    line:[ 
 
     ['#FBFCFE', '#00BAF2', '#00BAF2', '#00a7d9'], /* light blue */ 
 
     ['#FBFCFE', '#E80C60', '#E80C60', '#d00a56'], /* light pink */ 
 
     ['#FBFCFE', '#9B26AF', '#9B26AF', '#8b229d'], /* light purple */ 
 
     ['#FBFCFE', '#E2D51A', '#E2D51A', '#E2D51A'], /* med yellow */ 
 
     ['#FBFCFE', '#FB301E', '#FB301E', '#e12b1b'], /* med red */ 
 
     ['#FBFCFE', '#00AE4D', '#00AE4D', '#00AE4D'], /* med green */ 
 
    ] 
 
    }, 
 
    graph:{ 
 
    backgroundColor:'#FBFCFE', 
 
    \t title: { 
 
    \t fontFamily: 'Lato', 
 
    \t fontSize: 14, 
 
    \t // border: "1px solid black", 
 
    \t padding: "15", 
 
    \t fontColor : "#1E5D9E", 
 
    \t adjustLayout:true 
 
    \t }, 
 
    \t subtitle: { 
 
    \t fontFamily: 'Lato', 
 
    \t fontSize: 12, 
 
    \t fontColor: "#777", 
 
    \t padding: "5" 
 
    \t }, 
 
    \t plot: { 
 
    \t backgroundColor:'#FBFCFE', 
 
    \t marker: { 
 
    \t  size: 4 
 
    \t } 
 
    \t }, 
 
    tooltip : { 
 
     visible:true, 
 
     text: "%kl<br><span style='color:%color'>%t: </span>%v<br>", 
 
     backgroundColor : "white", 
 
     borderColor : "#e3e3e3", 
 
     borderRadius : "5px", 
 
     bold : true, 
 
     fontSize : "12px", 
 
     fontColor : "#2f2f2f", 
 
     textAlign : 'left', 
 
     padding : '15px', 
 
     shadow : true, 
 
     shadowAlpha : 0.2, 
 
     shadowBlur : 5, 
 
     shadowDistance : 4, 
 
     shadowColor : "#a1a1a1" 
 
    }, 
 
    \t plotarea: { 
 
    \t backgroundColor: 'transparent', 
 
    \t borderRadius: "0 0 0 10", 
 
    \t borderRight: "0px", 
 
    \t borderTop: "0px", 
 
    \t margin:"dynamic", 
 
    \t borderLeft:'1px solid #1E5D9E', 
 
    \t borderBottom:'1px solid #1E5D9E', 
 
    \t }, 
 
    \t scaleX: { 
 
    \t zooming:true, 
 
    \t offsetY: -20, 
 
    \t lineWidth: 0, 
 
    \t padding: 20, 
 
    \t margin: 20, 
 
    \t label:{ 
 
    \t  text:"Scale-X" 
 
    \t }, 
 
    \t item: { 
 
    \t  padding: 5, 
 
    \t  fontColor : "#1E5D9E", 
 
    \t  fontFamily: 'Montserrat', 
 
     \t rules: [ 
 
     \t  { 
 
     \t  rule: "%i == 0", 
 
     \t  visible: false 
 
     \t  } 
 
     \t ] 
 
    \t }, 
 
    \t tick: { 
 
    \t  lineColor: '#D1D3D4', 
 
     \t rules: [ 
 
     \t  { 
 
     \t  rule: "%i == 0", 
 
     \t  visible: false 
 
     \t  } 
 
     \t ] 
 
    \t }, 
 
    \t guide: { 
 
    \t  visible: true, 
 
     \t lineColor : '#D7D8D9', 
 
     \t lineStyle: 'dotted', 
 
     \t lineGapSize: '4px', 
 
     \t rules: [ 
 
     \t  { 
 
     \t  rule: "%i == 0", 
 
     \t  visible: false 
 
     \t  } 
 
     \t ] 
 
    \t } 
 
    \t }, 
 
    \t scaleY: { 
 
    \t zooming:true, 
 
    \t lineWidth: 0, 
 
    \t label:{ 
 
    \t  text:"Scale-Y" 
 
    \t }, 
 
    \t item: { 
 
    \t  padding: "0 10 0 0", 
 
    \t  fontColor : "#1E5D9E", 
 
    \t  fontFamily: 'Montserrat', 
 
     \t rules: [ 
 
     \t  { 
 
     \t  rule: "%i == 0", 
 
     \t  offsetX:10, 
 
     \t  offsetY:10, 
 
     \t  backgroundColor:'none' 
 
     \t  } 
 
     \t ] 
 
    \t }, 
 
    \t tick: { 
 
    \t  lineColor: '#D1D3D4', 
 
     \t rules: [ 
 
     \t  { 
 
     \t  rule: "%i == 0", 
 
     \t  visible:false 
 
     \t  } 
 
     \t ] 
 
    \t }, 
 
    \t guide: { 
 
    \t  visible: true, 
 
     \t lineColor : '#D7D8D9', 
 
     \t lineStyle: 'dotted', 
 
     \t lineGapSize: '4px', 
 
     \t rules: [ 
 
     \t  { 
 
     \t  rule: "%i == 0", 
 
     \t  visible: false 
 
     \t  } 
 
     \t ] 
 
    \t } 
 
    \t }, 
 
    \t scrollX:{ 
 
    \t bar:{ 
 
    \t  backgroundColor:'none', 
 
    \t  borderLeft:'none', 
 
    \t  borderTop:'none', 
 
    \t  borderBottom:'none' 
 
    \t }, 
 
    \t handle:{ 
 
    \t  backgroundColor:'#1E5D9E', 
 
    \t  height:5 
 
    \t } 
 
    \t }, 
 
    \t scrollY:{ 
 
    \t borderWidth:0, 
 
    \t bar:{ 
 
    \t  backgroundColor:'none', 
 
    \t  width:14, 
 
    \t  borderLeft:'none', 
 
    \t  borderTop:'none', 
 
    \t  borderBottom:'none' 
 
    \t }, 
 
    \t handle:{ 
 
    \t  borderWidth:0, 
 
    \t  backgroundColor:'#1E5D9E', 
 
    \t  width:5 
 
    \t } 
 
    \t }, 
 
    \t zoom:{ 
 
    \t backgroundColor:'#1E5D9E', 
 
    \t alpha:.33, 
 
    \t borderColor:'#000', 
 
    \t borderWidth:1 
 
    \t }, 
 
    \t preview:{ 
 
    \t borderColor:'#1E5D9E', 
 
    \t borderWidth:1, 
 
    \t adjustLayout:true, 
 
    \t handle:{ 
 
    \t  backgroundColor:'#1E5D9E', 
 
    \t  borderColor:'#1E5D9E' 
 
    \t }, 
 
    \t mask:{ 
 
    \t  backgroundColor:'#FFF', 
 
    \t  alpha:.95, 
 
    \t } 
 
    \t } 
 
    } 
 
}; 
 
    
 
var myConfig = { 
 
    \t type: "line", 
 
    \t title: { 
 
    \t text: "Average requests Per Minute", 
 
    \t }, 
 
    \t subtitle: { 
 
    \t text: "06/10/16 - 06/23/16", 
 
    \t }, 
 
    \t plotarea: { 
 
    \t marginTop:10, 
 
    \t marginBottom:80 
 
    \t }, 
 
\t scaleX: { 
 
    \t zooming:true, 
 
    \t labels:['6/10','6/11','6/12','6/13','6/14','6/15','6/16','6/17','6/18','6/19','6/20','6/21','6/22','6/23'] 
 
    \t }, 
 
    \t scaleY: { 
 
    \t zooming:true, 
 
    \t }, 
 
    \t preview:{}, 
 
    \t scrollX:{}, 
 
    \t scrollY:{}, 
 
\t series : [ 
 
\t \t { 
 
\t \t text: "Internal", 
 
\t \t \t values : [6,6,3.5, 4.5, 4.5, 4.5, 2.5, 4.5, 4.5, 5, 5, 4, 5, 5], 
 
\t \t }, 
 
\t \t { 
 
\t \t text: "External", 
 
\t \t \t values : [4.5, 4.5, 3.5, 3.5, 3.5, 2.5, 3.5, 3.5, 2.5, 2.5, 2, 3, 3, 2], 
 
\t \t }, 
 
\t \t { 
 
\t \t text: "Outbound", 
 
\t \t \t values : [2.5, 1.5, 1.5, 2.5, 1.5, 1.5, 1.5, 1, 1, 1, 1, 2, 2, 3], 
 
\t \t } 
 
\t ] 
 
}; 
 
    
 
zingchart.render({ 
 
\t id : 'myChart', 
 
    data: { 
 
    gui:{ 
 
     contextMenu:{ 
 
     button:{ 
 
      visible: true, 
 
      lineColor: "#2D66A4", 
 
      backgroundColor: "#2D66A4" 
 
     }, 
 
     gear: { 
 
      alpha: 1, 
 
      backgroundColor: "#2D66A4" 
 
     }, 
 
     position: "right", 
 
     backgroundColor:"#306EAA", /*sets background for entire contextMenu*/ 
 
     docked: true, 
 
     item:{ 
 
      backgroundColor:"#306EAA", 
 
      borderColor:"#306EAA", 
 
      borderWidth: 0, 
 
      fontFamily: "Lato", 
 
      color:"#fff" 
 
     } 
 
     } 
 
    }, 
 
    graphset:[myConfig] 
 
    }, 
 
\t height: 390, 
 
\t width: '100%', 
 
\t defaults: myTheme 
 
});
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script></head> 
 
\t <body> 
 
\t <section> 
 
\t \t <div id='myChart'></div> 
 
\t \t </section> 
 
\t </body> 
 
</html>

+0

を調整するだけで最も人気のstackoverflowの答えを使用して...!重要

デモ。しかし、ありがとう。 –

関連する問題