기고글 토론 "HTML의 차트 및 다이어그램" - 페이지 2

새 코멘트
 

다음은 data-from-csv.htm의 코드입니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
        
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Highcharts Example</title>


<!-- 1. Add these JavaScript inclusions in the head of your page -->

 
 <script src="jquery.min.js" type="text/javascript"></script>
 <script src="highcharts.js" type="text/javascript"></script>
<!-- - -->              



<!-- 2. Add the JavaScript to initialize the chart on document ready -->
                
 
 <script type="text/javascript">
                

$(document).ready(function() {
        
  var options = {

        chart: {
          renderTo: 'container',
          defaultSeriesType: 'column'
        },
        title: {
          text: 'Autocorrelation'
        },
        xAxis: {

          categories: []
                                
        },
        yAxis: {
          title: {
            text: 'Units'
          }
        },
        series: []
        };
                        
                        
/*
 CSV 파일에서 데이터를 로드합니다. */            

                        
$.get('data.csv', function(data) {
                                
 // 줄 나누기
                                
 var lines = data.split('\n');
                                
 $.each(lines, function(lineNo, line) {
                                        
   var items = line.split(',');
                                        
                                        
   // 헤더 라인에 카테고리 포함
                                        
   if (lineNo == 0) {
                                                
     $.each(items, function(itemNo, item) {
                                                        
       if (itemNo > 0) options.xAxis.categories.push(item);
                                                
    });
                                        }
                                        
                                        
// 나머지 줄에는 첫 번째 위치에 이름이 있는 데이터가 포함됩니다.
                
else {
                                                
var series = { 
                                                        
data: []
                                                
};
                                                
$.each(items, function(itemNo, item) {
                
if (itemNo == 0) {
                
series.name = item;
                                                        
} else {

series.data.push(parseFloat(item));
        
}
                                                
});
                                        
options.series.push(series);

                                        
}
                                        
                                
});
                                
                                
var chart = new Highcharts.Chart(options);
                        
});
});
                
</script>
                
        
</head>
        <body>
                
                
<!-- 3. Add the container -->
                
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
        
</body>
</html>

다음은 데이터 파일 data.csv입니다:

Categories,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21
ACF,0.0048,-0.0084,-0.0094,-0.0080,-0.0037,-0.0067,0.0052,-0.0018,0.0066,0.0267,-0.0210,0.0013,0.0032,-0.0027,0.0207,-0.0059,-0.0131,0.0160,0.0250,-0.0077
Bounds,0.0073,-0.0073,-0.0073,-0.0073,-0.0073,-0.0073,0.0073,-0.0073,0.0073,0.0073,-0.0073,0.0073,0.0073,-0.0073,0.0073,-0.0073,-0.0073,0.0073,0.0073,-0.0073

라이브러리 파일은 첨부하지 않습니다.

 

"도움"에 감사드립니다: 평소처럼 아무도 도와주지 않았고, 제가 직접 알아냈습니다 :-)

작성자에게 질문합니다. 3D 차트에도 비슷한 것이 있나요?

 

네. MT5의 정보 그래픽 표현은 약간 약합니다. 그리고 얼마나 많은 흥미로운 것들을 그릴 수 있습니까! 모든 것과 모든 것의 상관 관계 그래프, 다양한 웨이블릿 변환을 통한 현재 비율의 동적 표시, 3D 및 다른 것을 누가 알 수 있습니까? 저는 일련의 다른 비율의 잔차의 반 혼란스러운 상관 관계에 대해 밝은 화면을 만들고 싶습니다!

전략 테스터의 그래픽이 특히 나쁩니다. 테스터 결과를 텍스트 파일로 내보내는 것도 전혀 수행되지 않습니다.

그런데 어쨌든 데이터를 파일로 내보내려면 자체 그래픽을 만들지 말고 vinnigraphics, sigmaplot, originine 또는 excel과 같은 기성 패키지를 사용하는 것이 좋습니다.

저는 특히 이 기사의 핵심인 확률 분포 함수에 만족했습니다. 사람들은 코스에 대해 합리적으로 연구하려고 노력하고 있습니다. 보기 좋네요.

 

이 훌륭한 스크립트에 감사드립니다!

이 스크립트를 거래 서버의 거래 내역 대신 전략 테스터의 테스트 결과에서 작동하도록 할 수 있을까요?

테스트 결과를 해석하는 데 큰 도움이 될 것입니다.

고마워요

Gino.

 

글에 첨부되어 있는 파일을 어디서 다운로드할 수 있는지 알 수 없나요? 파일 이름은 있지만 링크가 없습니다:

파일

JS_Lib.zip - highcharts.js 및 jquery.min.js 라이브러리 파일
Test.zip - 파일 highcharts.js, jquery.min.js 및 Test_01.htm 파일
Example1.zip - 파일 highcharts.js, jquery.min.js, Example1.htm, Example1.mq5 및 exdat.txt 파일
Example2.zip - 파일 Example2.htm 및 exdat.txt
Report.zip - 파일 ProfitReport.htm 및 data.txt
ProfitReport.mq5 - 통계 수집 및 data.txt 파일 생성을 위한 스크립트입니다.

 
웹 프로그래머로 일할 때 저는 FusionCharts 라이브러리를 사용합니다.
템플릿에 차트와 그래프를 간단하게 설치할 수 있다는 점이 마음에 듭니다.
1. Java 스크립트 라이브러리 FusionCharts를 연결합니다.
2. 차트를 표시할 DIV를 만듭니다(id="chart_container").
3. 차트 데이터를 chartData 배열에 삽입합니다.
4. chartConfig 배열을 편집합니다. 이것이 차트의 디자인과 매개변수입니다.
5. FusionCharts.ready(function(){ var fusioncharts = new FusionCharts(chartConfig);fusioncharts.render(); })를 호출합니다;
예제의 자세한 코드 및 데모: http://profi.spage.me/jquery/creation-of-graphs-chart-and-diagrams-on-java-script
Creation of graphs, chart and diagrams on Java Script – profi.spage.me
  • profi.spage.me
Use Java Script Library FusionCharts to Create Graphs. Connect library FusionCharts to page. The documentation for this library can be found here. Create tag DIV id=”chart_container” for reload the chart. Create an array of data for the chart board. Create an array parameters for the chart design...
12
새 코멘트