Xaxes의 Chartsjs 시간

그래서 차트에서 Xaxes에 시간대를 생성하려고했습니다. 여러 종류의 예를 발견했지만 그 중 누구도 일하지 않았습니다. Chartsjs에 대한 의사는 나에게 약간 퍼지다. 그래서 어떻게 생성 된 시간을 내 xaxes에 삽입합니까?Xaxes의 Chartsjs 시간

$j(function(){ 
new Chart(document.getElementById("Combo"), 
    {"type":"bar", 
    "data":{ 
    "labels":["08:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00"], 
    "datasets":[{"label":"Bar Dataset", 
    "data":[11,58,23,44,19,87,65,11,58,23,44,19,87,65], 
    "borderColor":"rgb(255, 99, 132)", 
    "backgroundColor":"rgba(255, 99, 132, 0.2)"}, 

    {"label":"Line Dataset", 
    "data":[11,58,23,44,19,87,65,11,58,23,44,19,87,65 
    ], 
    "type":"line", 
    "fill":false, 
    "borderColor":"rgb(54, 162, 235)"}]}, 

    "options":{ 
    "scales":{ 
    "xAxes":[{ 
    time:{ 
    unit:"hour"} 
    }], 
    xAxes: [{ 
    type: 'time', 
    time: { 
    format: "HH:mm", 
    unit: 'hour', 
    unitStepSize: 1, 
    displayFormats: { 
     'hour': 'HH', 

    }, 
}], 
    "yAxes":[{ 
    "ticks":{"beginAtZero":true} 
    }] 
    } 
    } 
    }); 
});

출처

2017-09-14 Henrik Engdahl

당신은 날짜를 구문 분석하는 대신 (사용되지 않음) format의 parser 속성을 사용해야합니다. 그 외에도 수정해야 할 다른 구문 문제가 거의 없습니다. , 초기 작업의 비록 신속한 답변에 감사있어 -

$(function() { 
 
    new Chart(document.getElementById("Combo"), { 
 
     "type": "bar", 
 
     "data": { 
 
     "labels": ["08:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00"], 
 
     "datasets": [{ 
 
      "label": "Bar Dataset", 
 
      "data": [11, 58, 23, 44, 19, 87, 65, 11, 58, 23, 44, 19, 87, 65], 
 
      "borderColor": "rgb(255, 99, 132)", 
 
      "backgroundColor": "rgba(255, 99, 132, 0.2)" 
 
     }, { 
 
      "label": "Line Dataset", 
 
      "data": [11, 58, 23, 44, 19, 87, 65, 11, 58, 23, 44, 19, 87, 65], 
 
      "type": "line", 
 
      "fill": false, 
 
      "borderColor": "rgb(54, 162, 235)" 
 
     }] 
 
     }, 
 
     "options": { 
 
     "scales": { 
 
      "xAxes": [{ 
 
       type: 'time', 
 
       time: { 
 
        parser: "HH:mm", //<- use 'parser' 
 
        unit: 'hour', 
 
        unitStepSize: 1, 
 
        displayFormats: { 
 
        'hour': 'HH', 
 
        } 
 
       } 
 
      }], 
 
      "yAxes": [{ 
 
       "ticks": { 
 
        "beginAtZero": true 
 
       } 
 
      }] 
 
     } 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> 
 
<canvas id="Combo"></canvas>

출처

2017-09-14 13:45:21

헤이, 후반 답변 죄송 :

여기에 코드의 수정 된 버전입니다! 내 문제를 해결하지 못했던 것 같습니다. 콘솔에 예기치 않은 말을합니다. 당신이 말한 구문 문제는 추측하는 $ j 것입니다. $는 사용자 정의 jquery-denominator입니다. 그래서 tldr; 아직 작동하지 않습니다. Havent는 내가 당신의 코드를 시도한 이후로 작업했습니다. –

'$ j' * (그다지 중요하지 않음) * 이외에도 다른 구문 문제가 있습니다. 이는 코드가 작동하지 않는 주된 이유입니다. 코드를 철저히 확인하고 괄호 또는 쉼표를 빠뜨리지 않았는지 확인하십시오. –

Xaxes의 Chartsjs 시간

답변

관련 문제