Question

我有一个c3.js堆叠条形图，当您将鼠标悬停在Leaflet地图上时会更新，我需要工具提示是静态的，否则用户将悬停在地图的其他区域并更改条形图中的数据，之后实际上达到了它。但是，我是编码的新手，特别是C3的新手，我无法解决如何使工具提示静态。此外，有人知道如何设置工具提示的样式吗？我只是在网上找到了非常复杂的例子，但感觉我应该能够在生成图表之后在某个地方做到这一点。任何帮助将非常感激！

这是我的代码：

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
    });
  }

Answer 1

只需编辑工具提示中的位置：

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)
};

c3.js工具提示 - 制作静态和样式

1 个答案: