Question

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

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

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"]

@Update 2：

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

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

Answer 1

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

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

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

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，这样我们就不会在用户当时没有悬停在栏上时显示工具提示。

C3图表中的工具提示无法刷新

2 个答案: