反应HighCharts自定义图例

问题描述

我正在尝试自定义图表的图例。我的current legend必须看起来像this legend。

基本上，我需要使圆形图标为矩形，并更改图例文本的颜色以与图标相对应。

我到处都看过文档，但找不到解决方案。这就是我配置以下图形的方式（legend> itemStyle）：

   useEffect(() => {
      Highcharts.chart(chart.current,{
         chart: {
            type: 'column',style: {
               fontFamily: '"Roboto",sans-serif',},height: 312,credits: {
            enabled: false,title: {
            text: null,xAxis: {
            categories,labels: {
               step: 1,style: {
                  fontSize: '8px',color: '#808992',useHTML: true,formatter() {
                  const day = this.value.format('D');
                  if (moment().isSame(this.value,'d')) {
                     return `<strong style="font-weight: 900; color: #0E2C47;">${day}</strong>`;
                  }
                  return day;
               },gridlinewidth: 1,yAxis: {
            min: 0,title: {
               text: `Collections ${showValue ? 'value' : 'count'}`,style: {
                  color: '#0E2C47',fontWeight: '500',fontSize: '12px',letterSpacing: '0.3px',lineHeight: '14.4px',labels: {
               style: {
                  fontSize: '8px',formatter() {
                  // eslint-disable-next-line react/no-this-in-sfc
                  const collection = this.value;
                  const format = Math.abs(collection) > 999 ? `${Math.sign(collection) * ((Math.abs(collection) / 1000).toFixed(1))}K` : Math.sign(collection) * Math.abs(collection);
                  return `${format}`;
               },legend: {
            title: {
               text: 'Status',style: {
                  fontSize: '12px',color: '#0A1944',itemStyle: {
               fontSize: '10px',letterSpacing: '0.25px',reversed: 'true',layout: 'vertical',align: 'right',verticalAlign: 'bottom',itemmarginBottom: 8,x: -30,y: -2,plotOptions: {
            series: {
               stacking: 'normal',tooltip: {
            formatter() {
               // eslint-disable-next-line react/no-this-in-sfc
               return `<b>${this.y} ${this.series.name}</b><br/>${this.x.format('D MMM YYYY')}`;
            },series: [{
            name: 'Draft',data: chartData.draft,// [...times(() => null,30),...times(random,31)],color: collectionStateColors.draft,// processed
            legendindex: 0,{
            name: 'Approved',data: chartData.approved,color: collectionStateColors.approved,// orange
            legendindex: 1,{
            name: 'Expired',data: chartData.expired,color: collectionStateColors.expired,// purple
            legendindex: 2,{
            name: 'Submitted',data: chartData.submitted,color: collectionStateColors.submitted,// purple
            legendindex: 3,{
            name: 'Tracking',data: chartData.tracking,color: collectionStateColors.tracking,// light blue
            legendindex: 4,{
            name: 'Processed',data: chartData.processed,color: collectionStateColors.processed,// dark blue
            legendindex: 5,}],});
   });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）