Javascript 如何更改Chart.JS中标签的字体（系列）？_Javascript_Jquery_Html_Css_Chart.js2

Javascript 如何更改Chart.JS中标签的字体（系列）？

javascript jquery html css

Javascript 如何更改Chart.JS中标签的字体（系列）？,javascript,jquery,html,css,chart.js2,Javascript,Jquery,Html,Css,Chart.js2,我想在我的Chart.JS水平条形图中将字体更改为更时髦的字体。我尝试过以下方法，但都不起作用： var optionsBar = { . . . //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'" //bodyFontFamily: "'Candara', 'Calibri', 'Courier', 'serif'" //bodyFontFamily: "'Candara'" label: {

我想在我的Chart.JS水平条形图中将字体更改为更时髦的字体。我尝试过以下方法，但都不起作用：

var optionsBar = {
    . . .
    //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
    //bodyFontFamily: "'Candara', 'Calibri', 'Courier', 'serif'"
    //bodyFontFamily: "'Candara'"
    label: {
        font: {
            family: "Georgia"
        }
    }
};

我还读到，这将起作用：

Chart.defaults.global.defaultFont = "Georgia"

…但这段代码会去哪里？它应该是什么样子？我试过这个：

priceBarChart.defaults.global.defaultFont = "Georgia";

…但也没有什么好的效果

对于完整图片/上下文，以下是构成此图表的所有代码：

HTML

我甚至试过：

priceBarChart.defaults.global.defaultFont = "Georgia";

CSS

HTML

更新2 正如Matthew所暗示的，这是有效的（在任何特定于图表的脚本之前）：

这应该是有用的：。它说“有4种特殊的全局设置可以更改图表上的所有字体。这些选项位于

chart.defaults.global

”

您需要更改字体的

defaultFontFamily

。和

defaultFontColor

，

defaultFontSize

，以及

defaultFontStyle

用于颜色、大小等。

您在代码的以下部分将图表命名为priceBarChart：

var priceBarChart = new Chart(ctxBarChart, {
  type: 'horizontalBar',
  data: barChartData,
  options: optionsBar
})

这意味着

priceBarChart.defaults.global.defaultFont='Georgia'

将“深入”变量priceBarChart，进入其默认属性，更改其一个全局属性，该属性就是defaultFont，这正是您想要的

但是当你应用这段代码时，你基本上是用错误的字体创建图表，然后再修改，这有点难看。你需要做的是事先告诉图表字体是什么

您可以通过将字体声明与其他选项合并来实现这一点，就像使用变量

barChartData

和

optionsBar

所做的那样

在创建了

barChartData

和

optionsBar

之后，创建另一个名为

defaultOptions

的变量，如下所示：

var defaultOptions = {
    global: {
        defaultFont: 'Georgia'
    }
}

var priceBarChart = new Chart(ctxBarChart, {
  type: 'horizontalBar',
  data: barChartData,
  options: optionsBar,
  defaults: defaultOptions //This part has been added
})

你可以看到它有相同的结构。进入全局选项，并更改其defaultFont属性。现在，您需要在创建图表时将其应用于创建的图表，如下所示：

var defaultOptions = {
    global: {
        defaultFont: 'Georgia'
    }
}

var priceBarChart = new Chart(ctxBarChart, {
  type: 'horizontalBar',
  data: barChartData,
  options: optionsBar,
  defaults: defaultOptions //This part has been added
})

几乎每个JavaScript插件都使用这种覆盖选项的方法。当您创建一个新的实例时，插件会复制一个对象，该对象包含包含对象的对象等等。但这些对象可以使用其他选项进行修改，如

barChartData

、

optionsBar

和

defaultOptions

我希望这有帮助

使用chart.js更改字体大小、颜色、系列和重量

scales: {
        yAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}],
        xAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}]
        }

查看完整代码

<!doctype html>
<html>

    <head>
        <title>Chart.js</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
        <script src="js/Chart.bundle.js"></script>
        <script src="js/utils.js"></script>
        <style>
            canvas {
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                font-weight:700;  
            }
        </style>
    </head>
    <body>
        <div id="container" style="width:70%;">
            <canvas id="canvas"></canvas>
        </div>
        <script>
            var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var color = Chart.helpers.color;
            var barChartData = {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                datasets: [{
                        label: 'Completed',
                        // Green
                        backgroundColor: '#4caf50',
                        borderColor: '#4caf50',
                        borderWidth: 1,
                        data: [
                            5, 15, 25, 35, 45, 55
                        ]
                    }, {
                        label: 'Created',
                        // Blue
                        backgroundColor: '#1976d2',
                        borderColor: '#1976d2',
                        borderWidth: 1,
                        data: [
                            10, 20, 30, 40, 50, 60
                        ]
                    }]

            };

            window.onload = function () {
                var ctx = document.getElementById("canvas").getContext("2d");
                window.myBar = new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    options: {
                        responsive: true,
                        legend: {
                            position: 'top',
                            onClick: null
                        },

                        title: {
                            display: true,
                            text: '',
                            fontSize: 20
                        },
                        scales: {
                            yAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}],
                            xAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}]
                        }
                    }
                });
            };
        </script>
    </body>

</html>


Chart.js
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
字号：700；
}
风险值月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
var color=Chart.helpers.color；
var barChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[{
标签：“已完成”，
//绿色的
背景颜色：“#4caf50”，
边框颜色：“#4caf50”，
边框宽度：1，
数据：[
5, 15, 25, 35, 45, 55
]
}, {
标签：“已创建”，
//蓝色的
背景颜色：“#1976d2”，
边框颜色：“#1976d2”，
边框宽度：1，
数据：[
10, 20, 30, 40, 50, 60
]
}]
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myBar=新图表（ctx{
类型：'bar'，
数据：barChartData，
选项：{
回答：是的，
图例：{
位置：'顶部'，
onClick:null
},
标题：{
显示：对，
文本：“”，
尺寸：20
},
比例：{
yAxes:[{ticks:{fontSize:12，fontFamily:“'Roboto'，无衬线，'fontColor:'#000'，fontStyle:'500'}}]，
xAxes:[{ticks:{fontSize:12，fontFamily:“'Roboto'，无衬线，'fontColor:'#000'，fontStyle:'500'}]
}
}
});
};

如果要将字体系列添加到图表对象中，则可以将其添加到选项对象中

options: {
  legend: {
    labels: { 
      fontFamily: 'YourFont'
    }
  }...}

这里是文档的链接：

在哪里？我用我的图表名来代替“chart”进行了猜测，但没有用。看起来你不需要将

chart

更改为你的图表名。我注意到您有

Chart.defaults.global.defaultFont=“Georgia”

。如果是

Chart.defaults.global.defaultFontFamily=“Georgia”

，该行应该可以工作。您可以向…选项添加字体系列：{legend:{labels:{fontFamily:'FontYouWant'}}，}，}。这里有一个链接：抱歉，我退出了编程，无法访问该旧代码。工作解决方案：

scales: {
        yAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}],
        xAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}]
        }

<!doctype html>
<html>

    <head>
        <title>Chart.js</title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
        <script src="js/Chart.bundle.js"></script>
        <script src="js/utils.js"></script>
        <style>
            canvas {
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                font-weight:700;  
            }
        </style>
    </head>
    <body>
        <div id="container" style="width:70%;">
            <canvas id="canvas"></canvas>
        </div>
        <script>
            var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var color = Chart.helpers.color;
            var barChartData = {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                datasets: [{
                        label: 'Completed',
                        // Green
                        backgroundColor: '#4caf50',
                        borderColor: '#4caf50',
                        borderWidth: 1,
                        data: [
                            5, 15, 25, 35, 45, 55
                        ]
                    }, {
                        label: 'Created',
                        // Blue
                        backgroundColor: '#1976d2',
                        borderColor: '#1976d2',
                        borderWidth: 1,
                        data: [
                            10, 20, 30, 40, 50, 60
                        ]
                    }]

            };

            window.onload = function () {
                var ctx = document.getElementById("canvas").getContext("2d");
                window.myBar = new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    options: {
                        responsive: true,
                        legend: {
                            position: 'top',
                            onClick: null
                        },

                        title: {
                            display: true,
                            text: '',
                            fontSize: 20
                        },
                        scales: {
                            yAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}],
                            xAxes: [{ticks: {fontSize: 12, fontFamily: "'Roboto', sans-serif", fontColor: '#000', fontStyle: '500'}}]
                        }
                    }
                });
            };
        </script>
    </body>

</html>

options: {
  legend: {
    labels: { 
      fontFamily: 'YourFont'
    }
  }...}