我正在做一些探索模拟,我想展示图表来比较运行时算法之间的性能.
想到什么图书馆?如果我的教练很容易编译我的代码,我非常喜欢那些我喜欢的小版本.我检查了gdchart,但它似乎太沉重了.我只想要一个简单的xy时间轴图.
谷歌图表当然是不可能的,如果你读过这个类似的问题.
相关文章C++中的Scatter Plots.
Google Chart API可以免费使用吗?如果是这样,我在哪里可以找到它的文档?

我有使用googlechart的LineGraph.使用以下代码创建此图
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Categegories', 'R1' , 'R2' , 'R3' , 'R4' , 'R5' , 'R6' ],
['A', 1, 4, 2, 4, 1, null],
['D', 3, null, null, 7, null, 1],
['G', null, null, null, 8, null, null],
]);
var options = {
title: 'Graph',
pointSize: 6,
vAxis: {minValue:0, maxValue:10,gridlines:{count:6}},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Run Code Online (Sandbox Code Playgroud)
现在令人惊讶的是,我删除了一个数据行 ['D', 3, null, null, 7, null, 1],
它会产生错误 All series on a given axis must be …
我正在显示饼图.但是如何在饼图中显示标签.
下面是饼图的chart.js代码.
this.Pie = function(data, options) {
chart.Pie.defaults = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
animation: true,
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
onAnimationComplete: null
};
var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;
return new Pie(data, config, context);
};
Run Code Online (Sandbox Code Playgroud)
以下是用于显示饼图的html文件的代码
码:
var data = [{
value: 20,
color: "#637b85"
}, {
value: 30,
color: "#2c9c69"
}, {
value: 40,
color: "#dbba34"
}, {
value: 10,
color: "#c62f29"
}];
var canvas = document.getElementById("hours");
var ctx = …Run Code Online (Sandbox Code Playgroud) 我正在使用Chart.js饼图,我想删除切片之间的白线.有人能告诉我这样做吗?提前致谢
我在文件中没有看到任何内容.
<div class="pie-chart">
<div id="canvas-holder">
<canvas id="chart-area" width="250" height="250"/>
</div>
</div>
Run Code Online (Sandbox Code Playgroud) 使用Chart.js 1.x我可以创建一个饼图并自动分配颜色:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var data = [{"label":"Conservative","value":"5"},{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx).Pie(data);
</script>
</body>
Run Code Online (Sandbox Code Playgroud)
如果我对v 2.x做同样的事情
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");{"label":"Democratic","value":"6"}];
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Conservative", "Democratic"],
datasets: [{
data: [5, 15],
}]
}
});
</script>
</body>
Run Code Online (Sandbox Code Playgroud)
除非我手动指定颜色,否则整个饼图以灰色显示; 我错过了什么吗?我发现的唯一相关问题是这一个:Chart.js中的随机填充颜色,但是,如上所述,它完全适用于1.x所以我觉得它不再适用了.
我需要手动计算Ticklabels和Tickrange for charts.
我知道好标记的"标准"算法(参见http://books.google.de/books?id=fvA7zLEFWZgC&pg=PA61&lpg=PA61&redir_esc=y#v=onepage&q&f=false),我也知道这个Java实现.
问题是,使用这种算法,滴答声"太聪明"了.这意味着,该算法决定应显示多少刻度.我的要求是,总有5个Ticks,但这些当然应该是"漂亮的".天真的方法是获得最大值,除以5并乘以ticknumber.这里的值 - 当然 - 不是最优的,而且滴答非常难看.
有没有人知道问题的解决方案或有正式算法描述的提示?
我已经解决了我的问题,但由于我对这个网站太新了,所以无法自己回答:
结果我需要使用以下内容:
chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));
Run Code Online (Sandbox Code Playgroud)
我正在使用JQuery来访问元素 $('#pie_today_div').截至目前,证据表明PieChart构造函数必须具有标准JS代码,document.getElementById('pie_today_div')
也许正在发生其他事情,但改变我访问容器元素的方式修复了我的代码
原始问题参考我的解决方案
当我尝试实例化Google PieChart对象时,我收到"容器未定义"错误.
我在http://validator.w3.org/验证了我的页面,我得到了一个漂亮的绿色标语,说它验证了.
页面加载时我没有收到任何js错误.我的Ajax调用正在使用我想要的数据进行完整的往返.
这是我的HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="/css/note.css?10022012" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" language="javascript" src="/call/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
<script type="text/javascript" language="javascript" src="/call/js/init.js?10042012-2"></script>
<title>Call Stats</title>
</head>
<body>
<a href="#" id="pie_today_link">Today Stats</a>
<div id="pie_today_div"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这是js:
function drawPieChartToday() {
$.post('/call/ajax.php5',{
action:'pieToday'
}, function(ticketData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Count'); …Run Code Online (Sandbox Code Playgroud) 我正在通过MoSync开发跨平台的移动应用程序.关于用于在移动设备中显示来自蓝牙的数据的JavaScript图表,我需要一个具有非常高的渲染速度和性能的JavaScript图表API.它应该足够快以绘制/重绘/更新图表,因为数据将被注入Webview.AFAIK通过测试几个API,数据注入降低了移动应用程序的速度.FFI,以下几点可能有助于显示图表应该有多快,以便在应用程序中顺利运行.
请注意,我知道大量可用的JavaScript图表API,但是我需要一些建议,并考虑了解释的情况.
我在Stack Overflow中发现了类似的问题,但是所有这些问题都在一年前和两年前得到了解决.现在Chart.js出现在版本2中,并且许多文档都发生了变化.有人可以帮我展示带有标签的饼图示例 - 或者饼图及其所有片段的工具提示是否可见?
UPDATE
感谢@potatopeelings,他的回答非常适合Chart.js v2.1.
虽然我最初询问如何在饼图上永久显示工具提示,但我找到了一个更好的解决方案:以百分比形式显示值作为标签!它现在在Chart.js v2.1中启用了饼图.在图表选项中:
animation: {
duration: 0,
onComplete: function () {
var self = this,
chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = '18px Arial';
ctx.textAlign = "center";
ctx.fillStyle = "#ffffff";
Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) {
var meta = self.getDatasetMeta(datasetIndex),
total = 0, //total values to compute fraction
labelxy = [],
offset = Math.PI / 2, //start sector from top
radius,
centerx,
centery,
lastend = 0; //prev arc's end line: starting with 0 …Run Code Online (Sandbox Code Playgroud)