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

对于JavaScript和html还是一个新东西，我设法构建了一个简单的计算器，它也将绘制一些输出图。为此，我使用下面的chartjs模板。我希望能够改变Y轴，标题和图例的字体，因为它在创建时看起来真的很“乱”，但是，我不知道我会在哪里找到/定义合适的参数以及什么他们将是。另外，如果图表标题长到一秒，我会如何将图表标题换成第二行？我可以在脚本中指定这些项目，还是必须操作dx.chartjs文件，如果是，我需要在哪里进行更改？如何更改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>

来源

2013-12-13 user3089117

1）可以设置标题，图例字体选项，通过“字体”对应的选项元素的财产

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

您可以轴在ChartJS documentation找到更多样品。

2）您可以使用HTML标签BR来包装你的标题二线

title: "This is my<br/>long title"

来源

2013-12-17 18:17:48

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

回答

相关问题