The issue has been closed

设置完title不显示 #6549

chenaaaa1111 posted onGitHub

  _chart = new Chart({
    container: lineComponent.value as HTMLElement,
    autoFit: true,
    padding: 50,
    // width,
    // height,
    axis: {},
    legend: {
      size: () => {
        return 80;
      },
    },
  });
  const chart = _chart;
  chartInstance.value = _chart;
  _chart.theme({
    type: "classicDark",
    view: {
      viewFill: "#202945",
    },
  });

  const data =[
            {
                "factoryCode": "E100",
                "factoryName": "沈阳厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "E200",
                "factoryName": "辽宁厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "E400",
                "factoryName": "内蒙厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "E600",
                "factoryName": "济南厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "E700",
                "factoryName": "甘肃厂",
                "planOutput": 23.000000,
                "actualOutput": 42.000000
            },
            {
                "factoryCode": "E800",
                "factoryName": "四川厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "E900",
                "factoryName": "北京厂",
                "planOutput": 33.000000,
                "actualOutput": 42.000000
            },
            {
                "factoryCode": "EA00",
                "factoryName": "河北厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "EC00",
                "factoryName": "华北厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "ED00",
                "factoryName": "华中厂",
                "planOutput": 33.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "EE00",
                "factoryName": "青岛厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "EF00",
                "factoryName": "山东厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "EJ00",
                "factoryName": "贵州厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "ET00",
                "factoryName": "山西厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "EU00",
                "factoryName": "天津厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "EV00",
                "factoryName": "黑龙江厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "EW00",
                "factoryName": "吉林厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "EX00",
                "factoryName": "陕西厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            },
            {
                "factoryCode": "EY00",
                "factoryName": "新疆厂",
                "planOutput": 23.000000,
                "actualOutput": 12.000000
            }
        ]
  chart
    .interval()
    .coordinate({ transform: [{ type: "transpose" }] })
    .data(data)
    .encode("x", "factoryName")
    .encode("y", "value")
    .encode("color", "type")
    .scale("color", { range: ["#51BE97", "#C95E49", "#F7C74E"] })
    .transform({ type: "dodgeX" })
    .interaction("elementHighlight", { background: true })
    .tooltip({
      title: (d) => {
        console.log("datad", d);
        return d.factoryName;
      },
      items: [
        (d, index, data, column) => {
          return {
            // color: d.sold > 150 ? "red" : "blue", // 指定 item 的颜色

            name: d.type, // 指定 item 的名字
            value: d.value, // 使用 y 通道的值
          };
        },
      ],
    })
    .label({ text: "value", color: "#fff" });
  chart.options({
    title: {
      title: "日产量（千UC）",
      titleFill: "#ffffff",
      titleFontSize: 18,
    },
    axis: {
      y: {
        title: null,
      },
    },
    labels: [
      {
        text: "value",
        formatter: ".1%",
        textAlign: (d) => (+d.frequency > 0.008 ? "right" : "start"),
        fill: (d) => (+d.frequency > 0.008 ? "#fff" : "#000"),
        dx: (d) => (+d.frequency > 0.008 ? -5 : 5),
      },
    ],
  });
  chart.render();

标题就是不显示，不知道啥原因呢

对照下和官网案例得区别～

posted by hustcc 4 months ago

不知道你说的区别指啥？实际项目肯定和案例有区别求告知具体原因

posted by chenaaaa1111 4 months ago

我把ecode注释掉title就会显示，加上就不显示，这是不是bug，求大佬帮助

posted by chenaaaa1111 4 months ago

这还能影响，那应该就是 bug～可以提供一个官网粘贴进去直接复现的代码吗？我来调试看看！

posted by hustcc 4 months ago

You can try writing the code like this. ( do not set padding or make padding larger)

export function issue6549(context) {
  const { container, canvas } = context;

  const chart = new Chart({
    container: context.container,
    autoFit: true,
    width: 800,
    height: 800,
    title: {
      title: '日产量（千UC）',
      titleFill: '#ffffff',
      titleFontSize: 18,
    },
  });

  chart.theme({
    type: 'classicDark',
    view: {
      viewFill: '#202945',
    },
  });

  const transformedData: {
    factoryName: string;
    value: number;
    type: string;
  }[] = [];

  data.forEach((item) => {
    transformedData.push({
      factoryName: item.factoryName,
      value: item.planOutput,
      type: '计划',
    });
    transformedData.push({
      factoryName: item.factoryName,
      value: item.actualOutput,
      type: '实际',
    });
  });

  chart
    .interval()
    .coordinate({ transform: [{ type: 'transpose' }] })
    .data(transformedData)
    .encode('x', 'factoryName')
    .encode('y', 'value')
    .encode('color', 'type')
    .scale('color', { range: ['#51BE97', '#C95E49'] })
    .transform({ type: 'dodgeX' })
    .interaction('elementHighlight', { background: true })
    .tooltip({
      title: (d) => d.factoryName,
      items: [
        (d) => ({
          name: d.type,
          value: d.value,
        }),
      ],
    })
    .label({
      text: 'value',
      position: 'right',
      transform: [{ type: 'contrastReverse' }],
    });

  chart.options({
    axis: {
      y: {
        title: null,
      },
    },
  });

  const finished = chart.render();

  return { chart, finished };
}

posted by BQXBQX 4 months ago

@BQXBQX 但是感觉 encode.color 又和没有，影响 title 也确实是一个 bug。

posted by hustcc 4 months ago

是的，我尝试修复一下！

posted by BQXBQX 4 months ago

I took a quick look at the source code and found that the reason is probably that the size of padding and margin added together is smaller than the size of legend and title combined. So the reason why the title disappears is that the padding is too small, squeezing the title outside the canvas, so it cannot be seen. <img width="769" alt="image" src="https://github.com/user-attachments/assets/6d74a633-ddbe-4e91-ae12-481711ad9287" /> This problem can be solved by setting the padding larger or using auto padding

posted by BQXBQX 4 months ago

谢谢大佬解答，只是有个问题，没有数据的时候padding设置为50的时候是可以显示的，有了数据padding就要增加到120，所以我还要动态改变样式，不知道能不能做到自适应，谢谢。

posted by chenaaaa1111 4 months ago

@chenaaaa1111 不自己设置 padding 时应该就是自适应了

posted by BQXBQX 4 months ago

好吧，就是说现在加title的情况下只能让padding自适应不能自定义padding对吧，我请教下如果想要自定义padding的情况下可以做到自适应嘛？或者有计划要改这个问题么？

posted by chenaaaa1111 4 months ago

都已经自定义了，如何自适应呢？要是想自适应，那么自定义的 padding 就会发生修改。感觉自定义和自适应有些矛盾了

posted by BQXBQX 4 months ago

虽然如此，但是大佬，我自定义的是内边距，我设置了内边距你可以不自适应内边距，但是不能把我标题干掉吧？是不是大佬

posted by chenaaaa1111 4 months ago

padding 是用来设置给组件使用的，你可以试着设置 margiin 看看，参考这个视图模型：https://g2.antv.antgroup.com/examples/style/theme/#layout-area

posted by hustcc 4 months ago

好的谢谢大佬，但是我还是感觉很奇怪，为什么设置padding会影响到title，而且让我浪费了几天时间来查找原因，文档也没有个说明，我使用这个g2就是相信阿里产品，这个问题让我的印象分打了折扣~

posted by chenaaaa1111 4 months ago

也不想给你带来不好的体验，期望也体谅下，从技术设计的角度，@BQXBQX 也是社区上热心的同学帮忙解答问题🙏

posted by hustcc 4 months ago

感觉需要当出现组件的 y 或 x 小于 0 时，浏览器控制台出现 warning 警告提示，这样 debug 上成本会低一些。🤔

posted by BQXBQX 4 months ago

感觉需要当出现组件的 y 或 x 小于 0 时，浏览器控制台出现 warning 警告提示，这样 debug 上成本会低一些。🤔

也是一种方式，有这种做法，类似 react，开发环境给一些提示，生产环境没有。

posted by hustcc 4 months ago

做开发的都能理解程序中出现的问题，能热心解答也很难得，谢谢。

posted by chenaaaa1111 4 months ago

Fund this Issue

$0.00

Funded

Pull requests

设置完title不显示 #6549

Company

Community

Support

Connect