小编use*_*107的帖子
ChartJs画布在更改图形类型时显示上一个图形
我遇到了一个独特的事件,当用户从下拉菜单中选择并且如果您在画布上扫描图形会发生变化,之前的事件将在背景中显示为鬼影.我知道你可以使用像graph.destroy()这样的东西,但我不确定这是否合适以及放在哪里.
我更新图表的代码
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 600;
ctx.canvas.height = 200;
function updateChart() {
// ctx.canvas.destroy();
var determineChart = $("#chartType").val();
var params = dataMapMain[determineChart];
if ([params.method] == "Pie") {
document.getElementById("subOption").hidden = false;
document.getElementById("arrowId").hidden = false;
var determineChart = $("#subOption").val();
var params = dataMapSub[determineChart];
$('#subOption').on('change', updateChart);
new Chart(ctx)[params.method](params.data, options, {});
}
else {
document.getElementById("subOption").hidden = true;
document.getElementById("arrowId").hidden = true;
new Chart(ctx)[params.method](params.data, options, {});
}
}
$('#chartType').on('change', updateChart)
updateChart();
这个小提琴演示了这个问题,将鼠标悬停在图表上以查看" 幽灵 ".
6
推荐指数
推荐指数
1
解决办法
解决办法
1213
查看次数
查看次数
如何让AngularJS BLOB下载PDF？
大家好,我是开发AngularJS的新手,我正在试图弄清楚如何使用BLOB将PDF本地下载到一台机器上.我已经让它使用JSON,现在我需要一个PDF.我写了一些代码,但似乎没有用.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.center {
position: absolute;
left: 50%;
bottom: 50%;
}
.btn-purple {
background-color: rgb(97, 34, 115);
width: 100px;
}
</style>
<meta charset="UTF-8">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="center" ng-controller="jsonController" ng-app="app">
<a style="color: white;" ng-href="{{ fileUrl }}" download="{{fileName}}">
<button type="button" class="btn btn-purple">{{fileName}}</button>
</a>
</div>
<div class="center" ng-controller="pdfController" ng-app="app">
<a style="color: white;" ng-href="{{ fileUrl }}" download="{{fileName}}">
<button type="button" class="btn btn-purple">{{fileName}}</button>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> …6
推荐指数
推荐指数
2
解决办法
解决办法
2万
查看次数
查看次数
将外部JSON加载到ChartJs中
当我在JavaScript中使用库来绘制图表时,我是一个新手,我刚开始尝试使用Chartjs,我一直无法使用getJson或其他任何东西来加载我的json对象并替换标签和数据.我之前使用过HighCharts,与此相比它非常简单.另外,我如何将它放入Angular中的指令并显示它.
https://jsfiddle.net/0u9Lpttx/1/
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width: 100%; height: 100%;">
<canvas id="myChart" style="width: 100%; height: auto;"></canvas>
</div>
<div id="js-legend" class="chart-legend"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<script src="js/chartJsControl.js"></script>
</body>
</html>
data.json
[
{
"timestamp": "Monday",
"original_tweet": "756",
"retweets": "345",
"shared": "34",
"quoted": "14"
},
{
"timestamp": "Tuesday",
"original_tweet": "756",
"retweets": "345",
"shared": "34",
"quoted": "14"
},
{
"timestamp": "Wednesday",
"original_tweet": "756",
"retweets": "345",
"shared": "34",
"quoted": "14"
}
]
chartJsControl.js
var test …3
推荐指数
推荐指数
1
解决办法
解决办法
4万
查看次数
查看次数
angular-chart.js 中的水平条形图
我已经在 angular-chart.js 中成功创建了一个条形图，但现在我想将其更改为水平条形图。另外，我希望将字段放置在水平条本身的内部：
代码
angular.module("app", ["chart.js"])
.controller("LineCtrl", function ($scope) {
var x =
{
"labels": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
],
"data": [
99,
59,
80,
81,
56,
55,
40
],
"type": "line",
"series": "eventTypePerDay"
}
console.log(x.series);
//ses all of the variables to build the chart
$scope.labels = x.labels;
$scope.colours = ['#71d078'];
$scope.type = x.type;
$scope.data = [x.data];
$scope.series = [x.series];
});
我想要的例子
javascript angularjs chart.js angular-chart angular-chartist.js
3
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
ChartJS 根据下拉选择更改图表
我试图确定每次用户在 ChartJS 中选择新图表类型时重新加载画布的正确方法，现在它不会更改图表类型：
chartJs.js
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 600;
ctx.canvas.height = 200;
var determineChart = document.getElementById("chartType");
if( determineChart = "line") {
var myChart = new Chart(ctx).Line(data, options);
myChart.destroy();
}
else if (determineChart = "column"){
var myChart = new Chart(ctx).Bar(data, options);
}
索引.html
<select id="chartType">
<option value="line">Line</option>
<option value="column">Column</option>
<option value="area">Area</option>
<option value="areaspline">Area Spline</option>
<option value="pie">Pie(Test)</option>
</select>
2
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
Cesium Globe 聚类
我试图确定 id 有一种官方方法可以简单地在铯球上取点，当用户缩小时，它会变成一个簇图像，其下方的点数。我一直在搜索 Stack Overflow 和 Cesium 文档，结果空手而归。基于距离的将是首选。我也在使用 AngularJs Cesium Globe 这样的东西：
1
推荐指数
推荐指数
1
解决办法
解决办法
1812
查看次数
查看次数
Http状态代码工厂AngularJs
我是使用AngularJs的新手,我使用$ http get创建了一个简单的工厂,它获得了一个.json,它有一堆或http状态代码作为键,以及它们各自的消息作为值.由于某种原因,我想得到这个错误:
无法读取未定义的属性'get'
JSON:
{
"200": "Ok",
"201": "Created",
"202": "Accepted",
"404": "Not_Found",
"400": "Bad Request",
"403": "Forbidden",
"417": "Expectation Failed"
}
factory.js
.factory('statusCodesFactory', function () {
var httpStatusCodes = {
getStatus: function ($http) {
$http.get('catalog/statusCodes.json')
.then(function (response) {
httpStatusCodes.code = response;
});
}
}
return httpStatusCodes;
})
1
推荐指数
推荐指数
1
解决办法
解决办法
102
查看次数
查看次数