将外部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 = [];
$.getJSON("data.json", function (json) {
test.push(json[i].timestamp);
});
var data = {
labels: test,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 1000;
ctx.canvas.height = 800;
var myChart = new Chart(ctx).Bar(data);
问题答案：
如果要使用从data.json返回的JSON，则需要在回调函数中执行以下操作：
$.getJSON("data.json", function (json) {
// will generate array with ['Monday', 'Tuesday', 'Wednesday']
var labels = json.map(function(item) {
return item.timestamp;
});
var data = {
labels: labels,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 1000;
ctx.canvas.height = 800;
var myChart = new Chart(ctx).Bar(data);
});
如果您将它与Angular一起使用，我建议您使用angular
chart.js版本，请参见：http
://jtblin.github.io/angular-chart.js/
然后，您已经有了一个可以使用的角度指令！
-
我试图使用axios将一个外部url加载到使用vuejs的div中，我得到了 CORS策略阻止了从origin访问在处的XMLHttpRequest：请求的资源上没有'Access-Control-Allow-Origin'标头。 我错过了什么？ 堆栈跟踪： CORS策略阻止从来源“http://localhost:8080”访问位于“https://pay.stripe.com/receipts
-
我有一个简单的应用程序，将加载托管的网页，我想显示在单独的选项卡面板。最干净的方法是什么？选项卡可以在用户点击每个选项卡时加载，或者在应用程序启动时一次加载所有选项卡。Sencha Touch没有办法简单地使html： value成为一个URL。我可以为每个选项卡添加一些页面加载事件吗？ [更新] 我添加了使用本地html文件进行测试的初始化：方法中的Ajax调用的建议。但是，所有选项卡都显示要完
-
我有一个名为core project jar的maven spring项目，其中包含orm和持久性xml文件，以及在注释和xml中定义的实体。现在我有了另一个spring boot项目，它利用这个核心项目初始化持久性。在SpringBoot Main类中定义@EntityScan（packages）时，我能够扫描带注释的实体（即带有实体的实体），但没有扫描orm xml中定义的实体（即 获取错误，
-
我需要使用Play Framework 2.3(Java)将外部文件加载到类路径中 规定： 我的Play Framework应用程序（使用Java）在其文件夹中有这个自定义JAR，因此它会自动添加到类路径中（经过测试，工作正常）。我的Play应用程序在第一次加载路由（索引路由）时调用MyCustomJavaClass，所以当我在浏览器中点击我的Play应用程序时，上面的类加载器和输入流代码就会被启
-
我有一个带有spring boot的java项目，我需要加载应用程序。外部文件夹中的属性和依赖项jar。 我使用该应用程序进行了测试。类路径和加载程序中的属性。路径属性工作正常。 当我使用外部属性文件（我确信它们已被使用）时，加载程序。路径工作不正常，结果为ClassNotFound，因为JAR未加载。 此外，当我启动应用程序与**-Dloader.path=**xxx它的工作正常。 如何使用外部
-
当查看JavaFX SceneBuilder时，它能够加载任何类型的FXML。则忽略根节点或控制器。scenebuilder能够加载任何类型的fxml并显示其组件。 有没有人想要一种方法来加载一个fxml，而不考虑其字段的ID、控制器或根节点的类型？ 问题是，当我尝试加载任何fxml时，它只能加载，如果我设置了正确的根类型。我想（通过FileChooser）将我能找到的任何FXML加载到（比方说）