在许多图表库中,通常会提供一种方法来禁用或自定义从工具提示到数据点的线条。以下是一些常见图表库的示例,展示如何禁用这些线条。
在Chart.js中,你可以通过设置tooltips
选项中的mode
属性来禁用从工具提示到数据点的线条。
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(75, 192, 192)',
borderColor: 'rgb(75, 192, 192)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
options: {
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].label + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
}
}
},
hover: {
mode: 'index',
intersect: false
}
}
});
在Highcharts中,你可以通过设置tooltip
选项中的crosshairs
属性来禁用从工具提示到数据点的线条。
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'My Chart'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
},
yAxis: {
title: {
text: 'Values'
}
},
series: [{
name: 'My Series',
data: [1, 3, 2, 4, 5, 6, 7]
}],
tooltip: {
crosshairs: false
}
});
在D3.js中,你可以通过自定义工具提示的样式来禁用从工具提示到数据点的线条。
// 创建SVG容器
var svg = d3.select('svg');
// 创建数据点
var data = [10, 20, 30, 40, 50];
// 创建工具提示
var tooltip = d3.select('body').append('div')
.attr('class', 'tooltip')
.style('opacity', 0);
// 创建数据点
svg.selectAll('circle')
.data(data)
.enter().append('circle')
.attr('cx', function(d, i) { return i * 50 + 50; })
.attr('cy', function(d) { return 200 - d; })
.attr('r', 5)
.on('mouseover', function(d) {
tooltip.transition()
.duration(200)
.style('opacity', .9);
tooltip.html(d)
.style('left', (d3.event.pageX + 5) + 'px')
.style('top', (d3.event.pageY - 28) + 'px');
})
.on('mouseout', function(d) {
tooltip.transition()
.duration(500)
.style('opacity', 0);
});
通过这些示例,你可以看到如何在不同图表库中禁用从工具提示到数据点的线条。根据你使用的具体图表库,选择相应的方法进行配置。
领取专属 10元无门槛券
手把手带您无忧上云