如何更改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模板上的軸，標題，圖例格式

回答

相關問題