刻度之间的中心点标签（Polar Area Chart JS）

时间：2019-12-03 10:17:35

标签： chart.js styling

我正在使用Chart JS，其中有一个极地面积图（请参见图像https://imgur.com/XedmesD），我希望点标签在刻度线之间居中。我发现通过使用，似乎只能用于具有X和Y轴的条形图的解决方案。

xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        ]}

但是，使用极坐标面积图时，这似乎不起作用。

我的代码是

import React, { Component } from "react";
import Chart from "chart.js";

export default class OrdersFufilledChart extends Component {
  OrdersFufilledChart = React.createRef();

  componentDidMount() {
    const OrdersFufilledChart = this.OrdersFufilledChart.current.getContext(
      "2d"
    );

    new Chart(OrdersFufilledChart, {
      type: "polarArea",
        data: {
            datasets: [
                {
                    data: [342, 323, 333, 352, 361, 299, 272, 423, 425, 400, 382, 363],
                    backgroundColor: ["#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#ff0931", "#ff0931","#57C5C8","#57C5C8","#57C5C8","#57C5C8","#57C5C8"],
                    borderWidth: 4,
                    hoverBorderColor: "white",
                }
            ],
        labels: [
          "JAN",
          "FEB",
          "MAR",
          "APR",
          "MAY",
          "JUN",
          "JUL",
          "AUG",
          "SEP",
          "OCT",
          "NOV",
          "DEC"
        ],

      },
        options: {

            responsive: true,
            plugins: {
                datalabels: {
                    display: false,
                },

            },
            cutoutPercentage: 20,
            legend: {
                display: false
            },
            layout: {
                padding: 0,

            },
            scale: {
                scaleLabel: {
                    display: true
                },

           ticks: {
            max: 450,
            maxTicksLimit: 1,
                    display: false,

          },
          angleLines: {
            display: true
          },
            pointLabels: {
                display: true
            }
          },

      }
    });
  }
  render() {
    return (
      <div>
        <canvas
          id="OrdersFufilledChart"
          ref={this.OrdersFufilledChart}
          width={360}
          height={360}
        />
      </div>
    );
  }
}

任何对我如何做到这一点的见解或朝着正确方向发展的指针将不胜感激。

编辑

我正在寻找这样的东西，它们之间的标签。 https://imgur.com/gallery/L7P7qmu

2 个答案:

答案 0 :(得分：3)

为此使用datalabels-plugin怎么办？

我猜您在我使用此插件的地方看到过my other answer，因为您的代码与我的代码有很多相似之处。

我改进了代码，现在可以响应了。标签甚至是动画的。在这种情况下，由于3个字符的标签很小，因此我不赞同OP对另一个问题的关注（offtopic：有人可以在这里纠正这个同义词吗？我知道这是错误的...）。

完整代码：https://jsbin.com/hamekugoja/2/edit?js,output 

let myChart = new Chart(document.getElementById("pie-chart"), {
  type: "polarArea",
  data: {
    datasets: [{
      data: [342, 323, 333, 352, 361, 299, 272, 423, 425, 400, 382, 363],
      backgroundColor: ["#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#ff0931", "#ff0931", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8"],
      borderWidth: 4,
      hoverBorderColor: "white",
    }],
    labels: [
      "JAN",
      "FEB",
      "MAR",
      "APR",
      "MAY",
      "JUN",
      "JUL",
      "AUG",
      "SEP",
      "OCT",
      "NOV",
      "DEC"
    ],
  },
  options: {
    responsive: true,
    plugins: {
      datalabels: {
        formatter: function(value, context) {
          return context.chart.data.labels[context.dataIndex];
        },
        anchor: 'start',
        align: 'end',
        offset: 0 // Gets updated
      },
    },
    cutoutPercentage: 20,
    legend: {
      display: false
    },
    layout: {
      padding: 30,
    },
    scale: {
      scaleLabel: {
        display: true
      },
      ticks: {
        max: 450,
        maxTicksLimit: 1,
        display: false,
      },
      angleLines: {
        display: true
      },
      pointLabels: {
        display: false
      }
    },
    onResize: function() {
      let width = document.getElementById("pie-chart").width
      let padding = myChart.options.layout.padding
      myChart.options.plugins.datalabels.offset = width/2-padding
    }
  }
});

function updateOffset() {
  let width = document.getElementById("pie-chart").width
  let padding = myChart.options.layout.padding
  myChart.options.plugins.datalabels.offset = width/2-padding
  myChart.update()
}
updateOffset() //init call after we know the dimensions of the chart

答案 1 :(得分：0)

我一直在与chartjs中的文档打交道，我唯一能实现的就是将刻度线居中，但是极坐标图的线却被隐藏了，因为一旦绘制了刻度线，白色的线就会画上白色< / p>

极坐标图具有一个轴，这意味着它是一个径向图，在角和径向方向上的地图点上有一个轴，称为“径向轴”。

我使用了来自chartjs的“线性径向轴”文档，并能够使刻度线居中，希望这可能对您的问题有所帮助

<!DOCTYPE html>
<html>
	<head> <meta charset="UTF-8">
		<link  id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'><link  id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Crete Round' rel='stylesheet' type='text/css'><link  id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Coming Soon' rel='stylesheet' type='text/css'><link  id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'><link  id='GoogleFontsLink' href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>
		<script>
 WebFontConfig = {
 google: 
{families: ["Open Sans","Crete Round","Coming Soon","Play","Cabin",]},active: function() { 
 DrawTheChart(ChartData,ChartOptions,"chart-01","PolarArea")}
};
		</script>
		<script asyn src="https://livegap.com/charts/js/webfont.js">
		</script><script src="https://livegap.com/charts/js/Chart.min.js"></script>
		<script>
function DrawTheChart(ChartData,ChartOptions,ChartId,ChartType){
eval('var myLine = new Chart(document.getElementById(ChartId).getContext("2d")).'+ChartType+'(ChartData,ChartOptions);document.getElementById(ChartId).getContext("2d").stroke();')
}
		</script>
	</head>
	<body>
		<canvas  id="chart-01" width="500" height="500"  style="background-color:rgba(255,255,255,1.00);border-radius:0px;width:500px;height:500px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px"></canvas>
		<script> function MoreChartOptions(){} var ChartData = [{value :65,
color:'rgba(52,152,219,1)',title:'enero'},{value :8,color:'rgba(46,204,113,1)',title:'febrero'},{value :90,color:'rgba(166,107,190,1)',title:'marzo'},{value :81,color:'rgba(241,196,15,1)',title:'abril'},{value :56,color:'rgba(230,126,34,1)',title:'mayo'},{value :55,color:'rgba(192,58,43,1)',title:'junio'},{value :40,color:'rgba(141,68,173,1)',title:'julio'},];ChartOptions= {decimalSeparator:".",thousandSeparator:",",spaceLeft:12,spaceRight:12,spaceTop:12,spaceBottom:12,scaleLabel:"<%=value+''%>",yAxisMinimumInterval:'none',scaleShowLabels:false,scaleShowLine:false,scaleLineStyle:"solid",scaleLineWidth:1,scaleLineColor:"rgba(0,0,0,0.6)",scaleOverlay :false,scaleOverride :false,scaleSteps:10,scaleStepWidth:10,scaleStartValue:0,inGraphDataShow:true,inGraphDataTmpl:'<%=v2%>',inGraphDataFontFamily:"'Crete Round'",inGraphDataFontStyle:"normal normal",inGraphDataFontColor:"rgba(51,51,51,1)",inGraphDataFontSize:15,inGraphDataPaddingX:0,inGraphDataPaddingY:0,inGraphDataAlign:"center",inGraphDataVAlign:"middle",inGraphDataXPosition:2,inGraphDataYPosition:3,inGraphDataAnglePosition:2,inGraphDataRadiusPosition:3,inGraphDataRotate:0,inGraphDataPaddingAngle:0,inGraphDataPaddingRadius:15, inGraphDataBorders:false,inGraphDataBordersXSpace:1,inGraphDataBordersYSpace:1,inGraphDataBordersWidth:1,inGraphDataBordersStyle:"solid",inGraphDataBordersColor:"rgba(0,0,0,1)",legend:true,maxLegendCols:5,legendBlockSize:20,legendFillColor:'rgba(255,255,255,0.00)',legendColorIndicatorStrokeWidth:1,legendPosX:-2,legendPosY:4,legendXPadding:0,legendYPadding:0,legendBorders:false,legendBordersWidth:1,legendBordersStyle:"solid",legendBordersColors:"rgba(102,102,102,1)",legendBordersSpaceBefore:5,legendBordersSpaceLeft:5,legendBordersSpaceRight:5,legendBordersSpaceAfter:5,legendSpaceBeforeText:5,legendSpaceLeftText:5,legendSpaceRightText:5,legendSpaceAfterText:5,legendSpaceBetweenBoxAndText:5,legendSpaceBetweenTextHorizontal:5,legendSpaceBetweenTextVertical:5,legendFontFamily:"'Cabin'",legendFontStyle:"normal normal",legendFontColor:"rgba(0,0,0,1)",legendFontSize:15,showYAxisMin:false,rotateLabels:"smart",xAxisBottom:true,yAxisLeft:true,yAxisRight:false,graphTitleSpaceBefore:5,graphTitleSpaceAfter:5, graphTitleBorders:false,graphTitleBordersXSpace:1,graphTitleBordersYSpace:1,graphTitleBordersWidth:1,graphTitleBordersStyle:"solid",graphTitleBordersColor:"rgba(0,0,0,1)",graphTitle : "Gráfico Título",graphTitleFontFamily:"'Coming Soon'",graphTitleFontStyle:"normal normal",graphTitleFontColor:"rgba(52,152,219,1)",graphTitleFontSize:33,graphSubTitleSpaceBefore:-8,graphSubTitleSpaceAfter:3, graphSubTitleBorders:false,graphSubTitleBordersXSpace:1,graphSubTitleBordersYSpace:1,graphSubTitleBordersWidth:1,graphSubTitleBordersStyle:"solid",graphSubTitleBordersColor:"rgba(0,0,0,1)",graphSubTitle : "Añadir título sub aquí",graphSubTitleFontFamily:"'Play'",graphSubTitleFontStyle:"normal normal",graphSubTitleFontColor:"rgba(10,10,10,1)",graphSubTitleFontSize:14,scaleFontFamily:"'Open Sans'",scaleFontStyle:"normal normal",scaleFontColor:"rgba(0,0,0,1)",scaleFontSize:12,pointLabelFontFamily:"'Open Sans'",pointLabelFontStyle:"normal normal",pointLabelFontColor:"rgba(102,102,102,1)",pointLabelFontSize:12,angleShowLineOut:true,angleLineStyle:"solid",angleLineWidth:1,angleLineColor:"rgba(0,0,0,0.1)",percentageInnerCutout:50,scaleShowGridLines:true,scaleGridLineStyle:"solid",scaleGridLineWidth:1,scaleGridLineColor:"rgba(0,0,0,0.1)",scaleXGridLinesStep:1,scaleYGridLinesStep:3,segmentShowStroke:true,segmentStrokeStyle:"solid",segmentStrokeWidth:2,segmentStrokeColor:"rgba(255,255,255,1.00)",datasetStroke:true,datasetFill : true,datasetStrokeStyle:"solid",datasetStrokeWidth:2,bezierCurve:true,bezierCurveTension :0.4,pointDotStrokeStyle:"solid",pointDotStrokeWidth : 1,pointDotRadius : 3,pointDot : true,scaleTickSizeBottom:5,scaleTickSizeTop:5,scaleTickSizeLeft:5,scaleTickSizeRight:5,graphMin:0,barShowStroke : false,barBorderRadius:0,barStrokeStyle:"solid",barStrokeWidth:1,barValueSpacing:15,barDatasetSpacing:0,scaleShowLabelBackdrop :true,scaleBackdropColor:'rgba(255,255,255,0.75)',scaleBackdropPaddingX :2,scaleBackdropPaddingY :2,animation : true,onAnimationComplete : function(){MoreChartOptions()}};
 DrawTheChart(ChartData,ChartOptions,"chart-01","PolarArea");</script></body></html>

查看我在ticks:{},和angeLines:{},上所做的事情

您可能想看看docs，反正我想您必须进入New Axes并扩展极坐标图以满足您的需求。

您介意尝试使用其他图表生成器吗？ Try this

相关问题
最新问题