如何更改chartjs模板上的轴、标题、图例格式

How do I change axis, title, legend formatting on chartjs template

本文关键字：标题 格式 chartjs 何更改      更新时间：2023-09-26

javascript和html还是新手，我已经成功构建了一个简单的计算器，它还将绘制一些输出。为此，我使用了下面的chartjs模板。我希望能够更改y轴、标题和图例的字体，因为创建时它看起来真的很"起伏"，但是，我不知道在哪里可以找到/定义合适的参数以及它们会是什么。此外，如果图表标题太长，我该如何将其包装成第二行？我可以在脚本中指定这些项目吗？或者我必须操作dx.chartjs文件吗？如果可以，我需要在哪里进行更改？

非常感谢您的帮助

    <html>
    <head>
    <title> Savings </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/knockout-3.0.0.js"></script>
        <script src="js/globalize.min.js"></script>
        <script src="js/dx.chartjs.js"></script>
    </head>
    <script language="javascript">
    function btnCalculateTotal_Click()
    {
    houses = 0;
    cars = 0;
    houses = Number(frmSimpleCalculator.txtValue1.value);
    cars = Number(frmSimpleCalculator.txtValue2.value);
    sngTotal = houses + cars
    frmSimpleCalculator.txtTotal.value = sngTotal;
    test = 200
    var dataSource = [{ savings: "", Houses: sngTotal, Cars: 300 },];
 
    $("#chartContainer").dxChart({
    dataSource: dataSource,
    commonSeriesSettings: {
        argumentField: "savings",
        type: "bar",
        hoverMode: "allArgumentPoints",
        selectionMode: "allArgumentPoints",
        label: {
            visible: true,
            format: "fixedPoint",
            precision: 0
                }
                          },
    series: [
        { valueField: "Houses", name: "Houses" },
        { valueField: "Cars", name: "Cars" }
            ],
            
    title: "Savings potential",
    legend: {
        verticalAlignment: "bottom",
        horizontalAlignment: "center"
            },
    
    pointClick: function (point) {
        this.select();
                                 }
                            });
    }
            
    </script>
    <body bgcolor="#aaaaaa">
    <table style="background-color:black; color:white; width:800">
    <tr>
    <td>
    <strong>calculator</strong>
    </td>
    </tr>
    </table>
    <form name="frmSimpleCalculator" action="" method="get">
    <fieldset name="fraSimpleCalculator" style="width:1">
    <legend>Economic Savings Calculator</legend>
    <table width="300" border="0">
    <!-- Value 1 -->
    <tr>
    <td align="left">
    Houses:
    </td>
    <td align="right">
    <input type="text" value="50000" name="txtValue1" size="10" maxlength="10" style="text-align:right">
    </td>
    </tr>
    <!-- Value 2 -->
    <tr>
    <td align="left">
    Cars:
    </td>
    <td align="right">
    <input type="text" value="25" name="txtValue2" size="10" maxlength="10" style="text-align:right">
    </td>
    </tr>
    <!-- Horizontal rule -->
    <tr>
    <td align="center" colspan="2">
    <hr />
    </td>
    </tr>
    <!-- Total -->
    <tr>
    <td align="left">
    Total:
    </td>
    <td align="right">
    <input type="text" value="0" name="txtTotal" size="10" maxlength="5" style="text-align:right">
    </td>
    </tr>
    <!-- Calculate Button -->
    <tr>
    <td align="center" colspan="2">
    <input type="button" value="Calculate Total" name="btnCalculateTotal" style="width:150" OnClick="btnCalculateTotal_Click();">
    </td>
    </tr>
    <!-- Calculate Chart Button -->
    <tr>
    <td align="center" colspan="2">
    <input type="button" value="Update Chart" name="btnCalculateChart" style="width:150" OnClick="Thomas();">
    </td>
    </tr>

        <div class="content">
            <div class="pane">
                <div class="long-title"><h3></h3></div>
                <div id="chartContainer" style="width: 250px; height: 440px;" style="position:absolute; TOP:200px; LEFT:350px"></div>       
            </div>
        </div>
    </body>
    </html>

1）您可以通过相应选项元素的"font"属性设置标题、图例和轴的字体选项

legend: {
   font: {
      color: 'black',
      family: 'Zapf-Chancery, cursive',
      opacity: 1,
      weight: 700
    }
}

您可以在ChartJS文档中找到更多示例。

2） 您可以使用HTML标签br将标题包装到第二行

title: "This is my<br/>long title"
相关文章：