c3.js提示 - 让静态和风格

我有一个c3.js堆叠条形图当鼠标悬停在单张地图的更新，我需要的工具提示是静态的，因为否则用户将鼠标悬停在地图上的其他区域并在实际到达之前更改条形图中的数据。但是，我对编码感兴趣，特别是C3新手，我无法解决如何使工具提示变为静态。另外，是否有人知道如何设计稍后的工具提示？我只能在网上找到非常复杂的例子，但感觉我应该可以在生成图表后的某个地方做到这一点。任何帮助将不胜感激！c3.js提示 - 让静态和风格

这里是我的代码：

function getMiniChartData(properties) { 
var values = [ 
    ['rape', rape[properties['gss_code']]], 
    ['other sexual', other_sexual[properties['gss_code']]]]; 

console.log(values); 
return values; 
} 

var chart; 

function drawMiniChart(properties) { 
console.log('drawing mini chart'); 
var data = getMiniChartData(properties); 

chart = c3.generate({ 
    bindto: '#minichart', 
    color: { 
       pattern: ['#E31A1C', '#BD0026'] 
      }, 
    point: { 
      show: false 
       }, 

      tooltip: { 
      show: true 
       }, 
    data: { 
     columns: data, 
     type: 'bar', 
     groups: [ 
      ['rape', 'other sexual'] 
     ] 
    }, 
    axis: { 
     y: { 
      max:60, 
      min:0 
     } 
    }, 
    grid: { 
     y: { 
      lines: [{ 
       value: 0 
      }] 
     } 
    } 
}); 
} 

function updateMiniChartData(properties) { 
console.log('updating mini chart'); 
var data = getMiniChartData(properties); 
chart.load({ 
     columns: data 
    }); 
    }

来源

2016-05-17 Patricia Nilsson

你能模拟一个jsfiddle？（工作示例） – thatOneGuy

图表强奸数据？ ...：O –

只要编辑工具提示的位置：

position: function() { 
      var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments); 
      position.top = 0; 
      return position; 
     }

这将设置提示永远是在点的顶部。所以它保持在相同的y坐标（顶部：0），但遵循点x值。你可以走得更远，并将其设置为停留在页面上的一个位置。

入住这拨弄我已经把：http://jsfiddle.net/thatOneGuy/owhxgaqm/185/

这个问题会帮助你：C3 charts - contents of tooltip clickable

如果你想要看到所有的时间只是添加以下代码：

var originalHideTooltip = chart.internal.hideTooltip 
chart.internal.hideTooltip = function() { 
    setTimeout(originalHideTooltip, 100) 
};

来源

2016-05-17 12:18:03 thatOneGuy

thatOnGuy，有趣的你会看到这个。我在看你的例子，试图让它在我的代码前几天工作。但是，它似乎并没有工作。这就是我所说的地方： tooltip：{ position：function（）{ var position = c3.chart.internal.fn.tooltipPosition.apply（this，arguments）; position.top = 0; 返回位置; }} ，数据（...）但它没有什么区别。 –

你添加内容吗？只要按照我展示的例子。或者实施你自己的JSFiddle并且看不到我能做什么 – thatOneGuy

你的工具提示是右边的条形图吗？ – thatOneGuy

c3.js提示 - 让静态和风格

回答

相关问题