1

我刚刚尝试了 Chartjs 并面临两个问题。我愿意展示一个双馅饼（一个在另一个上面），以便在另一个中显示一个的细节。

问题：对于值和子值，我有不同的标签。但是在构建第二个图表时，chartjs 再次交互，导致前 3 个标签加倍。我想要的是在小馅饼上放三个第一个标签，在大馅饼上放其他标签。

谢谢你帮我解决这个问题。

let values = [309, 42, 3]
let subvalues = [74, 156, 79, 12, 22, 8, 0, 2, 1]
let labels = ["visits", "drafts", "contact", "T2", "T3", "T4", "T2", "T3", "T4", "T2", "T3", "T4"]

let chartjsWorkflowPieCtx = document.getElementById('chartjs-workflow-pie')
let chartjsWorkflowPie = new Chart(chartjsWorkflowPieCtx, {
  type: 'pie',
  data: {
    labels: labels,
    datasets: [
      {
        label: 'Details',
        backgroundColor: [
          shadeBlend(0.2, '#5782BB'),
          shadeBlend(0.4, '#5782BB'),
          shadeBlend(0.6, '#5782BB'),
          shadeBlend(0.2, '#64D7D6'),
          shadeBlend(0.4, '#64D7D6'),
          shadeBlend(0.6, '#64D7D6'),
          shadeBlend(0.2, '#f07dd8'),
          shadeBlend(0.4, '#f07dd8'),
          shadeBlend(0.6, '#f07dd8'),
        ],
        borderSize: 0,
        borderColor: 'rgba(255, 255, 255, 0)',
        data: subvalues
      },
      {
        label: "Global",
        backgroundColor: [
          '#7487bb',
          '#64D7D6',
          '#C4AFF0'
        ],
        borderSize: 0,
        borderColor: 'rgba(255, 255, 255, 0)',
        data: values
      },
    ]
  }
})



function shadeBlend(p, c0, c1) {
  var n = p < 0 ? p * -1 : p, u = Math.round, w = parseInt;
  if (c0.length > 7) {
    var f = c0.split(","), t = (c1 ? c1 : p < 0 ? "rgb(0,0,0)" : "rgb(255,255,255)").split(","), R = w(f[0].slice(4)),
      G = w(f[1]), B = w(f[2]);
    return "rgb(" + (u((w(t[0].slice(4)) - R) * n) + R) + "," + (u((w(t[1]) - G) * n) + G) + "," + (u((w(t[2]) - B) * n) + B) + ")"
  } else {
    var f = w(c0.slice(1), 16), t = w((c1 ? c1 : p < 0 ? "#000000" : "#FFFFFF").slice(1), 16), R1 = f >> 16,
      G1 = f >> 8 & 0x00FF, B1 = f & 0x0000FF;
    return "#" + (0x1000000 + (u(((t >> 16) - R1) * n) + R1) * 0x10000 + (u(((t >> 8 & 0x00FF) - G1) * n) + G1) * 0x100 + (u(((t & 0x0000FF) - B1) * n) + B1)).toString(16).slice(1)
  }
}
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chartjs-workflow-pie"></canvas>
</body>
</html>

4

0 回答 0