chartjs 템플릿의 축, 제목, 범례 서식을 변경하는 방법

자바 스크립트 및 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에서 더 많은 샘플을 찾으십시오. 당신은 두 번째 줄에 제목을 래핑하는 HTML 태그 BR을 사용할 수 있습니다

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

출처

2013-12-17 18:17:48

chartjs 템플릿의 축, 제목, 범례 서식을 변경하는 방법

답변

관련 문제