C3 图表中的工具提示不刷新

Question

我们在实时数据浮动的环境中使用 c3 图表库的条形图功能。这确实导致了一个问题，即如果用户将鼠标悬停在条形上方条形本身确实更新但工具提示没有更新 已显示。有没有办法更新/重新加载工具提示？

@更新 1： 回复较晚，抱歉。基本上我们有一个观察者来监听数据的变化。这将触发一个名为 reload 的方法，该方法具有以下几行（数据如何显示在 cmets 中）：

chart.load({
            xs: xs, // AmberViolation:"facilityId",BlueViolation:"facilityId",RedViolation:"facilityId"
            columns: columns, // [["facilityId", "SUB-GTW"],["RedViolation", 0],["BlueViolation", 2],["AmberViolation", 0]]
                    unload: _.difference(drawnChartYCols, nextDrawColumns),
            types: types, // AmberViolation:"bar",BlueViolation:"bar",RedViolation:"bar"
            colors: colors,
            done: function () {
                if (columns.length && columns[0].length > 10) {
                    chart.zoom([0, 11]);
                    d3.select(element[0]).selectAll('svg > g').filter(function(d, i) { return i === 1 }).attr('display', null);
                    chart.resize({width: $scope.width, height: $scope.height});
                            d3.select(element[0]).select('.extent').attr('x', 0);
                } else {
                    chart.unzoom();
                    d3.select(element[0]).selectAll('svg > g').filter(function(d, i) { return i === 1 }).attr('display', 'none');
                    chart.resize({width: $scope.width, height: $scope.height + 70});
                }
            }
});
chart.groups([groups]);// ["RedViolation","BlueViolation","AmberViolation"]

@更新 2：

您甚至可以在 http://c3js.org/samples/chart_bar_stacked.html 上看到这种行为。 在更新数据时将鼠标悬停在其中一个栏上，然后让鼠标停留在那里。工具提示不会更新。只有再次移动鼠标才会刷新。

@Update 3：由于即使在 c3 图表的示例上也会发生这种情况，我在 Github 上创建了一个错误：https://github.com/c3js/c3/issues/2307

Answer 1

您没有提供任何代码 sn-p，因此很难回答。我猜你没有正确更新你的数据。根据文档：

如果您在卸载之后/之前调用加载 API，请卸载加载参数 应该使用。否则图表将无法正确呈现，因为 动画的取消。

像这样卸载旧值可以解决您的问题：

chart.load({
  unload: true,
  columns: ['data1', 100]
});

在 SO 上查看此 previous answer。

Answer 2

我当前的解决方案是在数据更新后隐藏和显示工具提示以刷新它。它很难看，因为用户可以看到工具提示跳跃的位置。

var currentIndex = null;
var chart = c3.generate({
    data: {
        columns: [
            ['data1', 20],
            ['data2', 30],
            ['data3', 40]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2', 'data3']
        ],
        onmouseover: function(e) {
          currentIndex = e.index;
				},
        onmouseout: function(e) {
        	currentIndex = null;
        }
    },
    axis: {
							y: {
								show: true,
							},
							x: {
								show: true,
								type: ({
									NUMERIC: 'indexed',
									TEXT: 'category',
									DATE: 'timeseries'
								})['TEXT']
							}
						},
						bar: {
							width: {
								ratio: 0.9,
								max: 100
							}
						},
						padding: {
							top: 25,
							right: 25
						},
						zoom: {enabled: false},
						subchart: {
							show: true,
							axis: {
								x: {
									show: false
								}
							}
						},
						legend: {
							show: false
						},
						line: {
							connectNull: true
						},
						transition: {
							duration: null
						},
						grid: {
							y: {
								show: true
							}
						}
});

setTimeout(function () {
    chart.load({
        columns: [['data1', 30],
            ['data2', 10],
            ['data3', 10]]
    });
    
    if (currentIndex != null) {
    	chart.tooltip.hide();
    	chart.tooltip.show({x: currentIndex});
    }
    
}, 3000);

<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>

我添加了一个悬停侦听器，用于获取 currentHoverIndex 和一个 onmouseout 侦听器以将 currentHoverIndex 设置为 null，因此如果用户当时没有将鼠标悬停在栏上，我们不会意外显示工具提示。