在 angular-chart.js 中绘制常量线
Draw constant line in angular-chart.js
我需要在图表中画一条固定线。我正在使用 "angular-chart.js".
这是我的 HTML 部分
<canvas
id="line"
class="chart chart-line"
chart-data="dataCPC"
chart-labels="labelsCPC"
chart-series="seriesCPC"
chart-options="optionsCPC"
chart-dataset-override="datasetOverride"
>
</canvas>
这是我的 angular 代码
angular.module("app", ["chart.js"]).controller("LineCtrl", function
($scope, $http) {
var request = {
method: 'get',
url: 'asp/data.asp',
dataType: 'json',
contentType: "application/json"
};
$scope.arrLabelsACI = new Array;
$scope.arrDataACI = new Array;
$scope.dataACI = new Array;
$scope.labelsACI = new Array;
$http(request)
.success(function (jsonData) {
// LOOP THROUGH DATA IN THE JSON FILE.
angular.forEach(jsonData, function (item) {
//$scope.arrSeriesACI.push(item.TX_Total);
$scope.arrDataACI.push(item.AVG);
$scope.arrLabelsACI.push(item.HOUR);
});
// UPDATE SCOPE PROPERTIES FOR DATA.
$scope.dataACI.push($scope.arrDataACI.slice(0));
for (var i = 0; i < $scope.arrLabelsACI.length; i++) {
$scope.labelsACI.push($scope.arrLabelsACI[i]);
}
})
.error(function () {
});
$scope.datasetOverride = [{yAxisID: 'y-axis-1'}, {yAxisID: 'y-axis-2'}];
$scope.optionsACI = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left',
suggestedMin: 0,
ticks: {
min: 0
}
}
]
}
};
});
现在是这样的
https://i.screenshot.net/2e9pyf0
这就是我需要的。
https://i.screenshot.net/30lg5sr
非常感谢
终于找到解决办法了
添加 chartjs-plugin-annotation.js
<script src="js/chartjs-plugin-annotation.js"></script>
那么这部分就是全部了。
annotation: {
annotations: [{
id: 'a-line-1',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: '5',
borderColor: 'red',
borderWidth: 1
}
这是选项代码
$scope.optionsACI = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left',
suggestedMin: 0,
ticks: {
min: 0
}
}
]
},
annotation: {
annotations: [{
id: 'a-line-1',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: '5',
borderColor: 'red',
borderWidth: 1
}
]
}
};
我希望有一天这会对某人有所帮助。
我需要在图表中画一条固定线。我正在使用 "angular-chart.js".
这是我的 HTML 部分
<canvas
id="line"
class="chart chart-line"
chart-data="dataCPC"
chart-labels="labelsCPC"
chart-series="seriesCPC"
chart-options="optionsCPC"
chart-dataset-override="datasetOverride"
>
</canvas>
这是我的 angular 代码
angular.module("app", ["chart.js"]).controller("LineCtrl", function
($scope, $http) {
var request = {
method: 'get',
url: 'asp/data.asp',
dataType: 'json',
contentType: "application/json"
};
$scope.arrLabelsACI = new Array;
$scope.arrDataACI = new Array;
$scope.dataACI = new Array;
$scope.labelsACI = new Array;
$http(request)
.success(function (jsonData) {
// LOOP THROUGH DATA IN THE JSON FILE.
angular.forEach(jsonData, function (item) {
//$scope.arrSeriesACI.push(item.TX_Total);
$scope.arrDataACI.push(item.AVG);
$scope.arrLabelsACI.push(item.HOUR);
});
// UPDATE SCOPE PROPERTIES FOR DATA.
$scope.dataACI.push($scope.arrDataACI.slice(0));
for (var i = 0; i < $scope.arrLabelsACI.length; i++) {
$scope.labelsACI.push($scope.arrLabelsACI[i]);
}
})
.error(function () {
});
$scope.datasetOverride = [{yAxisID: 'y-axis-1'}, {yAxisID: 'y-axis-2'}];
$scope.optionsACI = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left',
suggestedMin: 0,
ticks: {
min: 0
}
}
]
}
};
});
现在是这样的
https://i.screenshot.net/2e9pyf0
这就是我需要的。
https://i.screenshot.net/30lg5sr
非常感谢
终于找到解决办法了
添加 chartjs-plugin-annotation.js
<script src="js/chartjs-plugin-annotation.js"></script>
那么这部分就是全部了。
annotation: {
annotations: [{
id: 'a-line-1',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: '5',
borderColor: 'red',
borderWidth: 1
}
这是选项代码
$scope.optionsACI = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left',
suggestedMin: 0,
ticks: {
min: 0
}
}
]
},
annotation: {
annotations: [{
id: 'a-line-1',
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: '5',
borderColor: 'red',
borderWidth: 1
}
]
}
};
我希望有一天这会对某人有所帮助。