ZingChart 上下文菜单样式问题

Question

我正在尝试向 ZingChart 上下文菜单添加一些 css 样式，但默认的内联样式会覆盖它们。是否可以清除上下文菜单的所有样式？

Answer 1

目前无法清除样式。您可以使用我们的 JSON syntax 调整它们。如果需要使用CSS。只需使用最流行的 Whosebug 答案...!important

.zc-menu.zc-style {
  background:red !important;
}

调整上下文菜单样式的演示

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',
    title: {
      fontFamily: 'Lato',
      fontSize: 14,
      // border: "1px solid black",
      padding: "15",
      fontColor : "#1E5D9E",
      adjustLayout:true
    },
    subtitle: {
      fontFamily: 'Lato',
      fontSize: 12,
      fontColor: "#777",
      padding: "5"
    },
    plot: {
      backgroundColor:'#FBFCFE',
      marker: {
        size: 4
      }
    },
   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"
    },
    plotarea: {
      backgroundColor: 'transparent',
      borderRadius: "0 0 0 10",
      borderRight: "0px",
      borderTop: "0px",
      margin:"dynamic",
      borderLeft:'1px solid #1E5D9E',
      borderBottom:'1px solid #1E5D9E',
    },
   scaleX: {
      zooming:true,
      offsetY: -20,
      lineWidth: 0,
      padding: 20,
      margin: 20,
      label:{
        text:"Scale-X"
      },
      item: {
        padding: 5,
        fontColor : "#1E5D9E",
        fontFamily: 'Montserrat',
        rules: [
          {
            rule: "%i == 0",
            visible: false
          }
        ]
      },
      tick: {
        lineColor: '#D1D3D4',
        rules: [
          {
            rule: "%i == 0",
            visible: false
          }
        ]
      },
      guide: {
        visible: true,
        lineColor : '#D7D8D9',
        lineStyle: 'dotted',
        lineGapSize: '4px',
        rules: [
          {
            rule: "%i == 0",
            visible: false
          }
        ]
      }
    },
    scaleY: {
      zooming:true,
      lineWidth: 0,
      label:{
        text:"Scale-Y"
      },
      item: {
        padding: "0 10 0 0",
        fontColor : "#1E5D9E",
        fontFamily: 'Montserrat',
        rules: [
          {
            rule: "%i == 0",
            offsetX:10,
            offsetY:10,
            backgroundColor:'none'
          }
        ]
      },
      tick: {
        lineColor: '#D1D3D4',
        rules: [
          {
            rule: "%i == 0",
            visible:false
          }
        ]
      },
      guide: {
        visible: true,
        lineColor : '#D7D8D9',
        lineStyle: 'dotted',
        lineGapSize: '4px',
        rules: [
          {
            rule: "%i == 0",
            visible: false
          }
        ]
      }
    },
    scrollX:{
      bar:{
        backgroundColor:'none',
       borderLeft:'none',
        borderTop:'none',
        borderBottom:'none'
      },
      handle:{
        backgroundColor:'#1E5D9E',
        height:5
      }
    },
    scrollY:{
      borderWidth:0,
      bar:{
        backgroundColor:'none',
        width:14,
        borderLeft:'none',
        borderTop:'none',
        borderBottom:'none'
      },
      handle:{
        borderWidth:0,
        backgroundColor:'#1E5D9E',
        width:5
      }
    },
    zoom:{
      backgroundColor:'#1E5D9E',
      alpha:.33,
      borderColor:'#000',
      borderWidth:1
    },
    preview:{
      borderColor:'#1E5D9E',
      borderWidth:1,
      adjustLayout:true,
      handle:{
        backgroundColor:'#1E5D9E',
        borderColor:'#1E5D9E'
      },
      mask:{
        backgroundColor:'#FFF',
        alpha:.95,
      }
    }
  }
};
 
var myConfig = {
  type: "line",
  title: {
    text: "Average requests Per Minute",
  },
  subtitle: {
    text: "06/10/16 - 06/23/16",
  },
  plotarea: {
    marginTop:10,
    marginBottom:80
  },
 scaleX: {
    zooming:true,
    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']
  },
  scaleY: {
    zooming:true,
  },
  preview:{},
  scrollX:{},
  scrollY:{},
 series : [
  {
    text: "Internal",
   values : [6,6,3.5, 4.5, 4.5, 4.5, 2.5, 4.5, 4.5, 5, 5, 4, 5, 5],
  },
  {
    text: "External",
   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],
  },
  {
    text: "Outbound",
   values : [2.5, 1.5, 1.5, 2.5, 1.5, 1.5, 1.5, 1, 1, 1, 1, 2, 2, 3],
  }
 ]
};
 
zingchart.render({ 
 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]
  },
 height: 390, 
 width: '100%',
 defaults: myTheme
});

<!DOCTYPE html>
<html>
 <head>
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script></head>
 <body>
   <section>
    <div id='myChart'></div>
  </section>
 </body>
</html>

ZingChart 上下文菜单样式问题

ZingChart context menu styles issue

zingchart