0

我已经在 Chart js 中创建了一个设计来响应,但现在我想在它的每个托盘上输入一些图标。那么,有人可以帮帮我吗?请在此处查看图片https://drive.google.com/file/d/1NsS6ARTrhITQQWQRk0e55vIgBkO00CqP/view?usp=sharing

左边的图片描述了我到目前为止所做的,右边的描述了我想要的。谢谢你

<CCardBody className="p-0 piechart-nav">
      <CChartPie
        datasets={[
          {
            backgroundColor: [
              "rgba(0, 120, 210, 0.8)",
              "rgba(0, 120, 210, 0.8)",
              "rgba(0, 120, 210, 0.8)",
              "rgba(0, 120, 210, 0.8)",
              "rgba(0, 120, 210, 0.8)",
              "rgba(0, 120, 210, 0.8)",
              "rgba(0, 120, 210, 0.8)",
              "rgba(0, 120, 210, 0.8)",
              "rgba(0, 120, 210, 0.8)",
              "rgba(0, 120, 210, 0.8)",
            ],
            hoverBackgroundColor: [
              "rgba(60, 60, 110, 1)",
              "rgba(60, 60, 110, 1)",
              "rgba(60, 60, 110, 1)",
              "rgba(60, 60, 110, 1)",
              "rgba(60, 60, 110, 1)",
              "rgba(60, 60, 110, 1)",
              "rgba(60, 60, 110, 1)",
              "rgba(60, 60, 110, 1)",
              "rgba(60, 60, 110, 1)",
              "rgba(60, 60, 110, 1)",
            ],
            data: [36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
          },
        ]}
        labels={[
          "This is Business.",
          "this is Good News.",
          "this is Religious Service. ",
          "this is Resource. ",
          "this is Organization. ",
          "this is Professional.",
          "this is Hotel & Restaurants.",
          "this is Music Video and Talent Show. ",
          "this is Events. ",
          "this is Discussion & forums.",
        ]}
        options={{
          tooltips: {
            enabled: true,
            bodyFontSize: 20,
            yPadding: 25,
            xPadding: 25,
            displayColors: false,
            callbacks: {
              label: function (tooltipItems, data) {
                return data.labels[tooltipItems.index];
              },
            },
            yAlign: "bottom",
            callbacks: {
              labelColor: function (tooltipItem, chart) {
                return {
                  backgroundColor: "rgba(60, 60, 110, 1)",
                };
              },
            },
            backgroundColor: "rgba(60, 60, 110, 1)",
          },
          legend: {
            display: false,
          },
          layout: {
            padding: {
              left: -0,
            },
          },
    
          responsive: true,
          maintainAspectRatio: false,
        }}
      />
    </CCardBody>;
4

0 回答 0