Question

在ZingChart图上添加比例标记时，默认情况下，该标记会绘制在其他绘制的数据下方，但并不总是那么容易看到（例如，一系列条形图下方的线条标记）。

var chartConfig = {
  type: 'bar',
  title: { text: 'Scale-Y Marker' },
  scaleY: {
    markers: [
      {
        type: 'line',
        range: [40],
        lineColor: '#DE7DA9',
        label:{
          text: 'Marker',
          backgroundColor: 'white',
          alpha: 0.7,
          textAlpha: 1,
          offsetX: 10,
          offsetY: -1
        }
      }
    ]
  },
  series: [
    {
      values: [50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75],
      backgroundColor: '#B7D977'
    }
  ]
};

zingchart.render({ 
  id : 'chartCanvas', 
  data : chartConfig, 
  height: 400, 
  width: '750'
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scale-Y Marker</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id='chartCanvas'></div>
  </body>
</html>

scale-y markers（v2.6.8）当前没有类似z-index的属性，是否可以在绘制的数据之上绘制Scale-Y标记？

Answer 1

您可以使用placement属性并将其设置为“ top”。

var chartConfig = {
  type: 'bar',
  title: { text: 'Scale-Y Marker On Top' },
  scaleY: {
    markers: [
      {
        type: 'line',
        range: [40],
        lineColor: '#DE7DA9',
        placement: 'top',
        label:{
          text: 'Marker',
          backgroundColor: 'white',
          alpha: 0.7,
          textAlpha: 1,
          offsetX: 10,
          offsetY: -1
        }
      }
    ]
  },
  series: [
    {
      values: [50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75],
      backgroundColor: '#B7D977'
    }
  ]
};

zingchart.render({ 
    id : 'chartCanvas', 
    data : chartConfig, 
    height: 400, 
    width: '750'
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scale-Y Marker On Top</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  <body>
    <div id='chartCanvas'></div>
  </body>
</html>

ZingChart Scale-Y标记，可以在顶部绘制吗？

1 个答案: