antd-BizCharts Label几何标记上的标注文本组件

最新推荐文章于 2025-06-28 09:10:08 发布

vue初学者

最新推荐文章于 2025-06-28 09:10:08 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41652466/article/details/80705639

本文通过一个具体的示例展示了如何使用BizCharts库来创建并配置带有标签的直方图。该示例包含了引入必要的JavaScript库、设置数据源、进行数据转换、定义图表属性以及渲染图表等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网：https://github.com/alibaba/BizCharts/blob/master/doc/api/label.md

例子：

<html>
<head>
    <script src="//g.alicdn.com/bizcharts/io-asserts/3.1.2/react16.0.0.production.min.js"></script>
    <script src="//g.alicdn.com/bizcharts/io-asserts/3.1.2/react-dom16.0.0.production.min.js"></script>
    <script src="//cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
    <script type="text/javascript" src="//gw.alipayobjects.com/os/antv/assets/data-set/0.8.6/data-set.min.js"></script>
    <script src="//g.alicdn.com/bizcharts/io-asserts/3.1.5/BizCharts.min.js"> </script>
    <script type="text/javascript" src="https://gw.alipayobjects.com/as/g/datavis/assets/1.0.1/jquery-3.2.1.min.js"></script>
    
    
  </head>
  <body>
      <div id="mountNode"></div>
      <script type="text/babel">
        const { Chart, Axis, Geom, Tooltip, Label } = window.BizCharts;
        $.getJSON('/BizCharts/public/data/diamond.json', data => {
          const ds = new DataSet();
          const dv = ds.createView('diamond').source(data);
          dv.transform({
              type: 'bin.histogram',
              field: 'depth',
              binWidth: 4, // 在此修改矩形的宽度，代表真实数值的大小
              as: ['depth', 'count'],
          });
          const cols = {
            depth: {
              tickInterval: 2
            }
          }
      
        ReactDOM.render((
          <Chart height={400} data={dv} scale={cols} forceFit>
            <Axis name="depth" />
            <Axis name="count" />
            <Tooltip inPlot={false} crosshairs={false} position={'top'} />
            <Geom type='interval' position="depth*count" >
              <Label
                content="count"
                labelLine= 'false'
                textStyle={{
                   textAlign: 'center', // 文本对齐方向，可取值为： start middle end
                   fill: '#404040', // 文本的颜色
                   fontSize: '12', // 文本大小
                   fontWeight: 'bold', // 文本粗细
                   rotate: 0,
                   textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
                 }}
              />
            </Geom>  
          </Chart>
        ), document.getElementById("mountNode"));
      });
    </script>
</body>
</html>