手动调用chart.showTooltip()方法时不会显示辅助线

[wenkeShi]

两个图表关联时，在图1的onShow钩子中调用图2的showTooltip函数，会触发图2的onShow钩子函数，但是图2中不会出现辅助线（Crosshairs)。要怎么让图2也显示辅助线或者tooltipMarker，例如图1为平滑曲线图，图2为柱状图。是传入的位置参数不对吗？还是必须要自己调用canvas的方法画直线？

[simaQ]

试试下面的配置：

chart.tooltip({
  showCrosshairs: true
});

[wenkeShi]

@simaQ 有这个配置但是没有显示辅助线

[simaQ]

能贴下代码么

[wenkeShi]

        <canvas id="header-chart1" ></canvas>
        <canvas id="header-chart2" ></canvas>

      var htmlFontSize = document.documentElement.style.fontSize.slice(0,-2);
       F2.Global.padding = [0, htmlFontSize*0.2];
        var data = [
          { time: '2016-08-08 00:00:00', tem: 10},
          { time: '2016-08-08 00:10:00', tem: 22},
          { time: '2016-08-08 00:30:00', tem: 16},
          { time: '2016-08-09 00:35:00', tem: 26},
          { time: '2016-08-09 01:00:00', tem: 12},
          { time: '2016-08-09 01:20:00', tem: 26},
          { time: '2016-08-10 01:40:00', tem: 18},
          { time: '2016-08-10 02:00:00', tem: 26},
          { time: '2016-08-10 02:20:00', tem: 12}
        ];
        var data2 = [
            { time: '2016-08-08 00:00:00', volumn: 10},
            { time: '2016-08-08 00:10:00', volumn: 22},
            { time: '2016-08-08 00:30:00', volumn: 16},
            { time: '2016-08-09 00:35:00', volumn: 26},
            { time: '2016-08-09 01:00:00', volumn: 12},
            { time: '2016-08-09 01:20:00', volumn: 26},
            { time: '2016-08-10 01:40:00', volumn: 18},
            { time: '2016-08-10 02:00:00', volumn: 26},
            { time: '2016-08-10 02:20:00', volumn: 12}
        ];
        var headerChart1 = new F2.Chart({
          id : 'header-chart1',
          pixelRatio : window.devicePixelRatio,
          width: window.innerWidth,
         height: window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.707,
        });
        headerChart1.source(data,
        {
          time : {
            range: [0,1],
            type : 'timeCat',
            tickCount : 2,
            mask : 'MM-DD',
          },
          tem : {
            tickCount: 3,
            min: 0,
          },
        });
        headerChart1.axis('tem', {
          position: 'right',
          labelOffset: -8,
          grid: {stroke: '#ccc'},
          label: function(text, index, total){
            var cfg = {
              textBaseline: 'middle',
            };
            if(index == 0){
              cfg.textBaseline = 'bottom';
            }else if(index == total-1){
              cfg.textBaseline = 'top';
            }
            return cfg;
          }
        });
        headerChart1.axis('time', {
          label:null,
          line: {
            lineWidth: 1,
            stroke: '#ccc'
          },
          grid: {
            stroke: '#ccc',
          },
        })
        headerChart1.tooltip({
          custom: true,
          showTooltipMarker: false,
          showCrosshairs: true,
          onShow: function(obj){
            console.log(obj);
            var item = obj.items[0];
          },
        });
        var headerChart1CVS = document.getElementById('header-chart1');
        var ctx1 = headerChart1CVS.getContext('2d');
        var grd1 = ctx1.createLinearGradient(0,0,0,headerChart1CVS.clientHeight);
        grd1.addColorStop(0, '#7255FF');
        grd1.addColorStop(1, '#f7f7f7');
        
        headerChart1.area().position('time*tem')
        .color(grd1)
        .shape('smooth');
       headerChart1.line().position('time*tem')
        .color('#7255FF')
        .shape('smooth')
        .style({
          lineWidth : 1,
        });
          // 绘制辅助线
        headerChart1.guide().line({
          start: ['min', 5],
          end: ['max',5],
          style: {
            stroke: '#5ed470', // 线的颜色
            lineDash: [ 0, 2, 2 ], // 虚线的设置
            lineWidth: 1 // 线的宽度
          } // 图形样式配置
        });
        headerChart1.guide().text({
          position: ['min', 5],
          content: '低风险值',
          style: {
            textAlign: 'end',
            textBaseline: 'middle',
            fill: '#34B31B'
          },
          offsetX: 50
        });
       headerChart1.render();
        var headerChart2 = new F2.Chart({
          id : 'header-chart2',
          pixelRatio : window.devicePixelRatio,
          padding: [0, htmlFontSize*0.2, 'auto'],
       width: window.innerWidth,
       height: window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.707,
        });
       headerChart2.source(data2, {
          time: {
            type: 'timeCat',
            tickCount: 2,
            range: [0,1],
            mask:'MM-DD',
          },
          volumn: {
            tickCount: 3,
            min: 0,
  
          },
        });
        headerChart2.axis('time',{
          line: {
            lineWidth: 1,
            stroke: '#ccc'
          },
          grid: {
            stroke: '#ccc',
          },
          label: function(text, index, total){
            var cfg = {
              textAlign: 'center',
            };
            if(index == 0){
              cfg.textAlign = 'left';
            }else if(index == total-1){
              cfg.textAlign = 'right';
            }
            return cfg;
          },
        });
        headerChart2.axis('volumn', {
          position: 'right',
          labelOffset: -8,
          grid: {stroke: '#ccc'},
          label: function(text, index, total){
            var cfg = {
              textBaseline: 'middle',
            };
            if(index == 0){
              cfg.textBaseline = 'bottom';
            }else if(index == total-1){
              cfg.textBaseline = 'top';
            }
            return cfg;
          }
        });
        headerChart2.tooltip({
          custom: true,
          showTooltipMarker: true,
          showCrosshairs: true,
          onShow: function(obj){
            console.log(obj);
            var item = obj.items[0];
            console.log(headerChart1.get('height'));
             headerChart1.showTooltip({x: item.x, y:73})
          },
        });
        headerChart2.interval().position('time*volumn');
        headerChart2.render();

@simaQ

[wenkeShi]

@simaQ 这是个bug吗？

[simaQ]

是这样的，之所以没有显示是你使用的方式不对，你在 headerChart1 的 onShow 钩子中调用了 headerChart2.showTooltip()，而在 headerChart2 的 tooltip 中的 onShow 方法中调用了 headerChart1.showTooltip()，两方都是在 onShow 即 tooltip 展示的时候调用，造成了双向循环了。你把 headerChart2 上改成 onChange 就好了，custom: true 和 onChange 最配。

headerChart2.tooltip({
          custom: true,
          showTooltipMarker: true,
          onChange: function(obj){
            console.log(obj);
            var item = obj.items[0];
            console.log(headerChart1.get('height'));
             headerChart1.showTooltip({x: item.x, y:73})
          },
        });

[wenkeShi]

@simaQ 换成了onChange也没有显示出辅助线呀

[simaQ]

https://codepen.io/Sima/pen/zjjOmW?editors=1010

[wenkeShi]

@simaQ https://codepen.io/anon/pen/gzzYyp 额，点击图1或者图2另一个图tooltip的辅助线并没有出现呀�。QAQ

[simaQ]

两个地方的 chart.tooltip() 上设置 triggerOn: [ 'click', 'touchmove' ] 试试