文章/答案/技术大牛

发布

社区首页 >问答首页 >在chartjs中更改piechart和linechart中标签的字体系列

问在chartjs中更改piechart和linechart中标签的字体系列
EN

Stack Overflow用户

提问于 2021-09-15 08:26:56

回答 1查看 73关注 0票数 2

我想在折线图和饼图中更改图例和标签的字体，我该怎么做？我几乎尝试了所有的方法，但不幸的是，我尝试了以下方法：

            <Pie
                data={state}
                defaultValue={resources.length + other}
                plugins={{
                    //@ts-ignore
                    font: {
                        weight: 'bold',
                        size: 100,
                        family: 'IranYekanFa',
                    }
                }}
                options={{
                    title: {
                        display: true,

                        text: "",
                        fontColor: 'rgb(160,0,255)',
                        fontSize: 30,
                        fontFamily:"IranYekanFa",
                    },
                    legend: {
                        labels: {
                            fontFamily:"IranYekanFa !important" ,
                        }
                    },
                    animation: {
                        duration: 0, // general animation time
                    },

                }}
            />

甚至尝试使用css：

.piechart-parent-div{
    font-family:"IranYekanFa" !important;
}

什么都不起作用！

font-family

css

reactjs

typescript

chart.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-15 12:09:04

由于字体没有改变看起来你正在使用V3，v3有一些主要的刹车变化，比如如何定义比例和名称空间的变化，所以你的标题和图例配置在错误的地方，而且你定义字体的方式也是错误的，对于所有的变化，请阅读migration guide。

更改字体的工作示例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          font: {
            family: 'Comic Sans MS',
          }
        }
      },
    },
    scales: {
      x: {
        ticks: {
          font: {
            family: 'Comic Sans MS'
          },
          reverse: false
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69189581

复制

相似问题

问在chartjs中更改piechart和linechart中标签的字体系列
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在chartjs中更改piechart和linechart中标签的字体系列EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在chartjs中更改piechart和linechart中标签的字体系列
EN