私はAngularを初めて使い、すべてのものがどのように適合するかに慣れています。私はディレクティブでグラフを表示したい。このチャートは静的なデータなので、動的に読み込まれたり更新されたりすることはなく、JSONから取得されます。AngularJSのディレクティブを使用したハイチャート
私はhereを参照しましたが、主な相違点は、ビューにハイチャートをロードしていないことです。私はbower_componentsディレクトリから.jsファイルにグローバルにロードしています。これは私のコードです:私はチャートがレンダリングされる場所に行くとき
の.jsは
/* global Highcharts */
angular.module("fusoDataLoggerChart", [])
.controller("fusoDataLoggerChartController", ["$http", "$scope", function($http, $scope) {
"use strict";
$scope.data = {
"activities": [
{},
{},
{
"title": "Engine speed",
"type": "DATA_LOGGER",
"result": {
"Engine speed": {
"data": [
{
"timestamp": 0,
"value": {
"type": "QUANTITY",
"unit": "rpm",
"value": 900
}
},
{
"timestamp": 1000,
"value": {
"type": "QUANTITY",
"unit": "rpm",
"value": 1000
}
},
{
"timestamp": 2000,
"value": {
"type": "QUANTITY",
"unit": "rpm",
"value": 2000
}
}
]
},
"Accelerator pedal position": {
"data": [
{
"timestamp": 0,
"value": {
"type": "QUANTITY",
"unit": "%",
"value": 0
}
},
{
"timestamp": 1000,
"value": {
"type": "QUANTITY",
"unit": "%",
"value": 10.6
}
},
{
"timestamp": 2000,
"value": {
"type": "QUANTITY",
"unit": "%",
"value": 11
}
}
]
}
}
}
]
}
}])
.directive("fusoDataLoggerChart", function() {
"use strict";
return {
scope: {},
restrict: 'E',
link: function(scope) {
scope.dataLoggerData = scope.data["activities"][2]["result"];
scope.timestamps = getData()[0];
scope.engineSpeeds = getData()[1];
scope.pedalPositions = getData()[2];
var chart = new Highcharts.Chart({
chart: {
type: 'line',
animation: false,
renderTo: "DataLoggerChartContainer",
zoomType: 'x'
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
type: "linear",
title: {
text: "Timestamp"
},
min: 0,
categories: scope.timestamps
},
yAxis: [{ //Engine Speed
title: {
text: 'Engine Speed'
},
labels: {
format: '{value} RPM'
},
opposite: true
}, { //Accelerator Pedal Position
title: {
text: 'Accelerator Pedal Position'
},
labels: {
format: '{value} %'
},
min: 0,
max: 100,
// FIXME: 'allowDecimal' may not work
allowDecimal: true
}],
series: [{
name: 'Engine Speed',
type: 'spline',
yAxis: 1,
tooltip: {
valueSuffix: ' RPM'
},
data: scope.engineSpeeds
}, {
name: 'Accelerator Pedal Position',
type: 'spline',
yAxis: 2,
tooltip: {
valueSuffix: ' %'
},
data: scope.pedalPositions
}]
});
function getData() {
var timestamps = [],
engineSpeeds = [],
pedalPositions = [];
var engineSpeedData = scope.dataLoggerData["Engine Speed"]["data"],
pedalPosData = scope.dataLoggerData["Accelerator Pedal Position"]["data"];
for (var i in engineSpeedData) {
timestamps.push(engineSpeedData[i].timestamp);
}
for (var j in engineSpeedData) {
engineSpeeds.push(engineSpeedData[j].value.value);
}
for (var k in pedalPosData) {
pedalPositions.push(pedalPosData[k].value.value);
}
return [timestamps, engineSpeeds, pedalPositions];
}
}
}
});
HTML
<fuso-data-logger-chart>
<div id="DataLoggerChartContainer"></div>
</fuso-data-logger-chart>
、何も示されていない(とのみHTMLれます私がDevToolsをチェックインすると、手動でコードセットが表示されます)。
N.B:私は、コントローラはまだ必要ありません実現が、それはJSONがコントローラ
感謝すべてのヘルプ内からREST呼び出しから得たであろう将来のようにあります。
あなたは角度が正しく実行されていることを確認していますか?あなたの指示コードは上手く見えますし、コントローラもそうです。あなたはプランカや何かを作ることができますか?何が間違っているか把握するためにすべてを一緒に見ることができれば、簡単にトラブルシューティングを行うことができます。 –
また、指示コードが実際に実行されていることを確認するには、 '' link() ''関数で '' console.log( 'code is running') ''を追加してみてください。それがうまくいけば、チャートが実際にHighChartsによって作成されていることを確認するために、あなたのチャート定義の後に '' console.log(chart) ''を追加してみてください。私はしばしば問題がより複雑でなければならないと考えるが、この行動をとる際には、私が見落とした本当に簡単な間違いを発見することがある。 –
私はいくつかの 'console.log()'を入れましたが、何も出力されません。何らかの理由で指令が呼び出されていないことを示唆しています。 – wmash