收藏
回答

在一个页面里用f2图表插件,生成俩个图表,第二个图表就会报错是什么问题?

initChart_cate(canvas, width, height) { // 使用 F2 绘制图表
    let cur_cate_order = this.data.cur_cate_order;
    let data = [];
    for(let i = 0; i < cur_cate_order.length; i++){
      let name = cur_cate_order[i].cate;
      if(name.length > 4){
        name = name.slice(0,4) + '...';
      }
      data.push({
        label:name,
        type:'销售额',
        value:cur_cate_order[i].total_price
      },{
        label:name,
        type:'成本',
        value:cur_cate_order[i].total_cost
      })
      
    };
   
    var chart_cate = new F2.Chart({
      el: canvas,
      width,
      height
    });
   
    chart_cate.source(data.reverse(), {
      value: {
        tickCount: 5
      }
    });
    chart_cate.coord({
      transposed: true
    });
   
    chart_cate.tooltip({
      custom: true, // 自定义 tooltip 内容框
      onChange: function onChange(obj) {
        var legend = chart_cate.get('legendController').legends.top[0];
        var tooltipItems = obj.items;
        var legendItems = legend.items;
        var map = {};
        legendItems.map(function(item) {
          map[item.name] = F2.Util.mix({}, item);
        });
        tooltipItems.map(function(item) {
          var name = item.name;
          var value = item.value;
          if (map[name]) {
            map[name].value = value;
          }
        });
        legend.setItems(Object.values(map));
      },
      onHide: function onHide() {
        var legend = chart_cate.get('legendController').legends.top[0];
        legend.setItems(chart_cate.getLegendItems().country);
      }
    });
    chart_cate.axis('label', {
      line: F2.Global._defaultAxis.line,
      grid: null
    });
    chart_cate.axis('value', {
      line: null,
      grid: F2.Global._defaultAxis.grid,
      label: function label(text, index, total) {
        var textCfg = {};
        if (index === 0) {
          textCfg.textAlign = 'left';
        } else if (index === total - 1) {
          textCfg.textAlign = 'right';
        }
        return textCfg;
      }
    });
    chart_cate.interval().position('label*value').color('type').adjust({
      type: 'dodge',
      marginRatio: 1 / 32
    });
    chart_cate.render();
  },

是我用了延迟加载的关系?



回答关注问题邀请回答
收藏

1 个回答

  • 维维
    维维
    2019-09-25


    报这个错是因为外面的盒子没有设置宽高

    <view class="box-height4">

        <ff-canvas id="column-dom4" canvas-id="column" opts="{{ opts }}"></ff-canvas>

    </view>

    像我这里,一定要去设置box-height4的宽和高


    2019-09-25
    有用
    回复
登录 后发表内容
问题标签