xTip文本会超出 #2035
Description
代码如下：
/** @jsx jsx */
import { jsx, Canvas, Chart, Line, Axis, Tooltip } from '@antv/f2';
const data = [
{
date: '2017-06-05',
value: 116,
},
{
date: '2017-06-06',
value: 129,
},
{
date: '2017-06-07',
value: 135,
},
{
date: '2017-06-08',
value: 86,
},
{
date: '2017-06-09',
value: 73,
},
{
date: '2017-06-10',
value: 85,
},
{
date: '2017-06-11',
value: 73,
},
{
date: '2017-06-12',
value: 68,
},
{
date: '2017-06-13',
value: 92,
},
{
date: '2017-06-14',
value: 130,
},
{
date: '2017-06-15',
value: 245,
},
{
date: '2017-06-16',
value: 139,
},
{
date: '2017-06-17',
value: 115,
},
{
date: '2017-06-18',
value: 111,
},
{
date: '2017-06-19',
value: 309,
},
{
date: '2017-06-20',
value: 206,
},
{
date: '2017-06-21',
value: 137,
},
{
date: '2017-06-22',
value: 128,
},
{
date: '2017-06-23',
value: 85,
},
{
date: '2017-06-24',
value: 94,
},
{
date: '2017-06-25',
value: 71,
},
{
date: '2017-06-26',
value: 106,
},
{
date: '2017-06-27',
value: 84,
},
{
date: '2017-06-28',
value: 93,
},
{
date: '2017-06-29',
value: 85,
},
{
date: '2017-06-30',
value: 73,
},
{
date: '2017-07-01',
value: 83,
},
{
date: '2017-07-02',
value: 125,
},
{
date: '2017-07-03',
value: 107,
},
{
date: '2017-07-04',
value: 82,
},
{
date: '2017-07-05',
value: 44,
},
{
date: '2017-07-06',
value: 72,
},
{
date: '2017-07-07',
value: 106,
},
{
date: '2017-07-08',
value: 107,
},
{
date: '2017-07-09',
value: 66,
},
{
date: '2017-07-10',
value: 91,
},
{
date: '2017-07-11',
value: 92,
},
{
date: '2017-07-12',
value: 113,
},
{
date: '2017-07-13',
value: 107,
},
{
date: '2017-07-14',
value: 131,
},
{
date: '2017-07-15',
value: 111,
},
{
date: '2017-07-16',
value: 64,
},
{
date: '2017-07-17',
value: 69,
},
{
date: '2017-07-18',
value: 88,
},
{
date: '2017-07-19',
value: 77,
},
{
date: '2017-07-20',
value: 83,
},
{
date: '2017-07-21',
value: 111,
},
{
date: '2017-07-22',
value: 57,
},
{
date: '2017-07-23',
value: 55,
},
{
date: '2017-07-24',
value: 60,
},
];
const context = document.getElementById('container').getContext('2d');
const LineChart = (
<Axis
field="date"
tickCount={3}
style={{
label: { align: 'between' },
}}
/>
<Tooltip
snap={true}
showTooltipMarker={true}
tooltipMarkerStyle={{
fill: '#E63130',
stroke: '#FFFFFF',
radius: 8,
lineWidth: 1,
}}
crosshairsType="xy"
showCrosshairs={true}
showXTip={true}
showYTip={true}
custom={true}
/>
);
const chart = new Canvas(LineChart.props);
chart.render();