ant-design-charts
ant-design-charts copied to clipboard
ant-design
🐛[BUG]Mix中legend不生效
🐛 bug 描述 [详细地描述 bug，让大家都能理解]
📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]
🏞 期望结果 [描述你原本期望看到的结果]
💻 复现代码 [提供可复现的代码，仓库，或线上示例]
© 版本信息
- ant-design-charts 版本: [e.g. 0.9.0]
- 浏览器环境
- 开发环境 [e.g. mac OS]
🚑 其他信息 [如截图等其他信息可以贴在这里]
import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import { Mix } from '@ant-design/plots';
const DemoMix = () => { const averageData = [ { date: '2015-02', value: 21168, }, { date: '2015-08', value: 21781, }, { date: '2016-01', value: 23818, }, { date: '2017-02', value: 25316, }, { date: '2018-01', value: 26698, }, { date: '2018-08', value: 27890, }, ]; const config = { legend:{ position:'top', date:{position:'top'} }, appendPadding: 20, tooltip: { shared: true, }, syncViewPadding: true, plots: [ {
type: 'column',
options: {
legend:{
date:{position:'top'}
},
region: { start: { x: 0, y: 0 }, end: { x: 0.48, y: 1 } },
data: [
{
date: '2015-02',
value: 160,
},
{
date: '2015-08',
value: 245,
},
{
date: '2016-01',
value: 487,
},
{
date: '2017-02',
value: 500,
},
{
date: '2018-01',
value: 503,
},
{
date: '2018-08',
value: 514,
},
],
xField: 'date',
yField: 'value',
yAxis: {
type: 'log',
max: 100000,
},
meta: {
date: {
sync: true,
},
value: {
alias: '店数(间)',
},
},
label: {
position: 'middle',
},
},
},
{
type: 'line',
options: {
data: averageData,
xField: 'date',
yField: 'value',
xAxis: false,
yAxis: {
type: 'log',
max: 100000,
},
label: {
offsetY: -8,
},
meta: {
value: {
alias: '平均租金(元)',
},
},
color: '#FF6B3B',
annotations: averageData.map((d) => {
return {
type: 'dataMarker',
position: d,
point: {
style: {
stroke: '#FF6B3B',
lineWidth: 1.5,
},
},
};
}),
},
},
{
type: 'line',
options: {
data: [
{
date: '2015-02',
value: null,
},
{
date: '2015-08',
value: 0.029,
},
{
date: '2016-01',
value: 0.094,
},
{
date: '2017-02',
value: 0.148,
},
{
date: '2018-01',
value: 0.055,
},
{
date: '2018-08',
value: 0.045,
},
],
xField: 'date',
yField: 'value',
xAxis: false,
yAxis: {
line: null,
grid: null,
position: 'right',
max: 0.16,
tickCount: 8,
},
meta: {
date: {
sync: 'date',
},
value: {
alias: '递增',
formatter: (v) => `${(v * 100).toFixed(1)}%`,
},
},
smooth: true,
label: {
callback: (value) => {
return {
offsetY: value === 0.148 ? 36 : value === 0.055 ? 0 : 20,
style: {
fill: '#1AAF8B',
fontWeight: 700,
stroke: '#fff',
lineWidth: 1,
},
};
},
},
color: '#1AAF8B',
},
},
],
}; return <Mix {...config} />; };
ReactDOM.render(<DemoMix />, document.getElementById('container'));
提供一下不生效代码
const averageData = [ { date: '2015-02', value: 21168, }, { date: '2015-08', value: 21781, }, { date: '2016-01', value: 23818, }, { date: '2017-02', value: 25316, }, { date: '2018-01', value: 26698, }, { date: '2018-08', value: 27890, }, ]; const config = { legend:{ position:'top', date:{position:'top'} }, appendPadding: 20, tooltip: { shared: true, }, syncViewPadding: true, plots: [ {
type: 'column',
options: {
legend:{
date:{position:'top'}
},
region: { start: { x: 0, y: 0 }, end: { x: 0.48, y: 1 } },
data: [
{
date: '2015-02',
value: 160,
},
{
date: '2015-08',
value: 245,
},
{
date: '2016-01',
value: 487,
},
{
date: '2017-02',
value: 500,
},
{
date: '2018-01',
value: 503,
},
{
date: '2018-08',
value: 514,
},
],
xField: 'date',
yField: 'value',
yAxis: {
type: 'log',
max: 100000,
},
meta: {
date: {
sync: true,
},
value: {
alias: '店数(间)',
},
},
label: {
position: 'middle',
},
},
},
{
type: 'line',
options: {
data: averageData,
xField: 'date',
yField: 'value',
xAxis: false,
yAxis: {
type: 'log',
max: 100000,
},
label: {
offsetY: -8,
},
meta: {
value: {
alias: '平均租金(元)',
},
},
color: '#FF6B3B',
annotations: averageData.map((d) => {
return {
type: 'dataMarker',
position: d,
point: {
style: {
stroke: '#FF6B3B',
lineWidth: 1.5,
},
},
};
}),
},
},
{
type: 'line',
options: {
data: [
{
date: '2015-02',
value: null,
},
{
date: '2015-08',
value: 0.029,
},
{
date: '2016-01',
value: 0.094,
},
{
date: '2017-02',
value: 0.148,
},
{
date: '2018-01',
value: 0.055,
},
{
date: '2018-08',
value: 0.045,
},
],
xField: 'date',
yField: 'value',
xAxis: false,
yAxis: {
line: null,
grid: null,
position: 'right',
max: 0.16,
tickCount: 8,
},
meta: {
date: {
sync: 'date',
},
value: {
alias: '递增',
formatter: (v) => `${(v * 100).toFixed(1)}%`,
},
},
smooth: true,
label: {
callback: (value) => {
return {
offsetY: value === 0.148 ? 36 : value === 0.055 ? 0 : 20,
style: {
fill: '#1AAF8B',
fontWeight: 700,
stroke: '#fff',
lineWidth: 1,
},
};
},
},
color: '#1AAF8B',
},
},
]}
没有生效，版本是"@ant-design/charts": "^1.4.2",
提供一下不生效代码
const averageData = [ { date: '2015-02', value: 21168, }, { date: '2015-08', value: 21781, }, { date: '2016-01', value: 23818, }, { date: '2017-02', value: 25316, }, { date: '2018-01', value: 26698, }, { date: '2018-08', value: 27890, }, ]; const config = { legend:{ position:'top', date:{position:'top'} }, appendPadding: 20, tooltip: { shared: true, }, syncViewPadding: true, plots: [ {
type: 'column', options: { legend:{ date:{position:'top'} }, region: { start: { x: 0, y: 0 }, end: { x: 0.48, y: 1 } }, data: [ { date: '2015-02', value: 160, }, { date: '2015-08', value: 245, }, { date: '2016-01', value: 487, }, { date: '2017-02', value: 500, }, { date: '2018-01', value: 503, }, { date: '2018-08', value: 514, }, ], xField: 'date', yField: 'value', yAxis: { type: 'log', max: 100000, }, meta: { date: { sync: true, }, value: { alias: '店数(间)', }, }, label: { position: 'middle', }, }, }, { type: 'line', options: { data: averageData, xField: 'date', yField: 'value', xAxis: false, yAxis: { type: 'log', max: 100000, }, label: { offsetY: -8, }, meta: { value: { alias: '平均租金(元)', }, }, color: '#FF6B3B', annotations: averageData.map((d) => { return { type: 'dataMarker', position: d, point: { style: { stroke: '#FF6B3B', lineWidth: 1.5, }, }, }; }), }, }, { type: 'line', options: { data: [ { date: '2015-02', value: null, }, { date: '2015-08', value: 0.029, }, { date: '2016-01', value: 0.094, }, { date: '2017-02', value: 0.148, }, { date: '2018-01', value: 0.055, }, { date: '2018-08', value: 0.045, }, ], xField: 'date', yField: 'value', xAxis: false, yAxis: { line: null, grid: null, position: 'right', max: 0.16, tickCount: 8, }, meta: { date: { sync: 'date', }, value: { alias: '递增', formatter: (v) => `${(v * 100).toFixed(1)}%`, }, }, smooth: true, label: { callback: (value) => { return { offsetY: value === 0.148 ? 36 : value === 0.055 ? 0 : 20, style: { fill: '#1AAF8B', fontWeight: 700, stroke: '#fff', lineWidth: 1, }, }; }, }, color: '#1AAF8B', }, }, ]}没有生效，版本是"@ant-design/charts": "^1.4.2",
重新编辑一下，看下 markdown 怎么内嵌代码。
提供一下不生效代码
const averageData = [ { date: '2015-02', value: 21168, }, { date: '2015-08', value: 21781, }, { date: '2016-01', value: 23818, }, { date: '2017-02', value: 25316, }, { date: '2018-01', value: 26698, }, { date: '2018-08', value: 27890, }, ]; const config = { legend:{ position:'top', date:{position:'top'} }, appendPadding: 20, tooltip: { shared: true, }, syncViewPadding: true, plots: [ {
type: 'column', options: { legend:{ date:{position:'top'} }, region: { start: { x: 0, y: 0 }, end: { x: 0.48, y: 1 } }, data: [ { date: '2015-02', value: 160, }, { date: '2015-08', value: 245, }, { date: '2016-01', value: 487, }, { date: '2017-02', value: 500, }, { date: '2018-01', value: 503, }, { date: '2018-08', value: 514, }, ], xField: 'date', yField: 'value', yAxis: { type: 'log', max: 100000, }, meta: { date: { sync: true, }, value: { alias: '店数(间)', }, }, label: { position: 'middle', }, }, }, { type: 'line', options: { data: averageData, xField: 'date', yField: 'value', xAxis: false, yAxis: { type: 'log', max: 100000, }, label: { offsetY: -8, }, meta: { value: { alias: '平均租金(元)', }, }, color: '#FF6B3B', annotations: averageData.map((d) => { return { type: 'dataMarker', position: d, point: { style: { stroke: '#FF6B3B', lineWidth: 1.5, }, }, }; }), }, }, { type: 'line', options: { data: [ { date: '2015-02', value: null, }, { date: '2015-08', value: 0.029, }, { date: '2016-01', value: 0.094, }, { date: '2017-02', value: 0.148, }, { date: '2018-01', value: 0.055, }, { date: '2018-08', value: 0.045, }, ], xField: 'date', yField: 'value', xAxis: false, yAxis: { line: null, grid: null, position: 'right', max: 0.16, tickCount: 8, }, meta: { date: { sync: 'date', }, value: { alias: '递增', formatter: (v) => `${(v * 100).toFixed(1)}%`, }, }, smooth: true, label: { callback: (value) => { return { offsetY: value === 0.148 ? 36 : value === 0.055 ? 0 : 20, style: { fill: '#1AAF8B', fontWeight: 700, stroke: '#fff', lineWidth: 1, }, }; }, }, color: '#1AAF8B', }, }, ]}没有生效，版本是"@ant-design/charts": "^1.4.2",
重新编辑一下，看下 markdown 怎么内嵌代码。
const averageData = [
{
date: '2015-02',
value: 21168,
},
{
date: '2015-08',
value: 21781,
},
];
const config: any = {
appendPadding: 8,
tooltip: {
shared: true,
},
legend: {
date: {
position: 'top',
layout: 'horizontal',
},
},
syncViewPadding: true,
plots: [
{
type: 'column',
options: {
data: [
{
date: '2015-02',
value: 160,
},
{
date: '2015-08',
value: 245,
},
],
xField: 'date',
yField: 'value',
yAxis: {
type: 'log',
max: 100000,
},
meta: {
date: {
sync: true,
},
value: {
alias: '店数(间)',
},
},
label: {
position: 'middle',
},
},
},
{
type: 'line',
options: {
data: averageData,
xField: 'date',
yField: 'value',
xAxis: false,
yAxis: {
type: 'log',
max: 100000,
},
label: {
offsetY: -8,
},
meta: {
value: {
alias: '平均租金(元)',
},
},
color: '#FF6B3B',
annotations: averageData.map((d) => {
return {
type: 'dataMarker',
position: d,
point: {
style: {
stroke: '#FF6B3B',
lineWidth: 1.5,
},
},
};
}),
},
},
{
type: 'line',
options: {
data: [
{
date: '2015-02',
value: null,
},
{
date: '2015-08',
value: 0.029,
},
],
xField: 'date',
yField: 'value',
xAxis: false,
yAxis: {
line: null,
grid: null,
position: 'right',
max: 0.16,
tickCount: 8,
},
meta: {
date: {
sync: 'date',
},
value: {
alias: '递增',
formatter: (v) => `${(v * 100).toFixed(1)}%`,
},
},
smooth: true,
label: {
callback: (value) => {
return {
offsetY: value === 0.148 ? 36 : value === 0.055 ? 0 : 20,
style: {
fill: '#1AAF8B',
fontWeight: 700,
stroke: '#fff',
lineWidth: 1,
},
};
},
},
color: '#1AAF8B',
},
},
],
};
Legend can only be used in groups or stacks. https://codesandbox.io/s/vigorous-ardinghelli-1936gp?file=/index.js