在Chartjs中将标签的每个部分添加到PolarArea

时间:2019-07-30 22:26:04

标签: chart.js

我有一个极地面积图,但是我不知道如何在图例中的每个项目周围放置图例:

http://prntscr.com/om7enn

顺便说一句,第二个数据集是分割更多的切片,如果有一种方法可以删除带有不可见切片的第二个数据集,或者对那个数据集禁用动画也不错:D,但据我所知,动画配置适用于内部的所有数据集。

现在,我有以下代码:

var myChart = new Chart(ctx, {
  type: 'polarArea',
  data: {
    labels: ['humanista - Alentador', 'Afiliativo', 'Aprobador', 'Convencional', 'Dependiente', 'Evitativo', 'Opositor', 'Empoderado', 'Competitivo', 'Perfeccionista', 'Orientado al logro', 'Autodidacta'],
    datasets: [{
        // data: [10, 17, 20,30,25,32,17,23,41,33,29,50],
        data: dataParaGrafico,
        label: '',
        backgroundColor: [
          '#006eff75',
          '#006eff75',
          '#00c91e6e',
          '#00c91e6e',
          '#00c91e6e',
          '#00c91e6e',
          '#ff000066',
          '#ff000066',
          '#ff000066',
          '#ff000066',
          '#006eff75',
          '#006eff75',
        ],
        borderColor: [
          '#006eff',
          '#006eff',
          '#00c91e',
          '#00c91e',
          '#00c91e',
          '#00c91e',
          '#ff0000',
          '#ff0000',
          '#ff0000',
          '#ff0000',
          '#006eff',
          '#006eff',
        ],
        borderWidth: 1,
      },
      {
        data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
        label: '',
        animateScale: false,
        backgroundColor: [
          '#0000',
          '#0000',
          '#0000',
          '#0000',
          '#0000',
          '#0000',
          '#0000',
          '#0000',
          '#0000',
          '#0000',
          '#0000',
          '#0000',
        ],
        borderColor: [
          '#464646',
          '#464646',
          '#464646',
          '#464646',
          '#464646',
          '#464646',
          '#464646',
          '#464646',
          '#464646',
          '#464646',
          '#464646',
          '#464646',

        ],
        borderWidth: 1,
      }
    ]
  },
  options: {
    drawTicks: false,
    scale: {
      animation: {
        animateRotate: false,
        animateScale: true
      },
      gridLines: {
        color: '#464646',
        drawTicks: false,
        tickMarkLength: 20
      },
      ticks: {
        min: 0,
        max: 50,
        display: false,
        lineWidth: 1,
        fontColor: '#464646',
        fontStyle: 'Roboto',
        lineWidth: 1,
        fontSize: 15,
        fontStyle: 'normal',
        stepSize: 8.3

      }
    },
    legend: {
      display: false
    }
  }
});

0 个答案:

没有答案