Tag: charts

使用chart.js将数据添加到折线图: 我想在图表中添加一个新数据，但是当调用我的“添加”function时，浏览器会抛出一个错误，上面写着“Uncaught TypeError：undefined is not function”。似乎图表对象无法识别“AddData”函数，但我不知道如何解决它。在文档中出现此function它对我不起作用。 .addData（valuesArray，label）在Chart实例上调用addData（valuesArray，label），为每个数据集传递一个值数组，以及这些点的标签。小提琴样本http://jsfiddle.net/rferreiraperez/pevy7vsz/5/ var myLineChart = new Chart(ctx).Line(data); $(“#add”).on( “click”, function() { var month = $(“#month”).val(); var point = $(“#point”).val(); var points = new Array(); points.push(point); console.log(“adding…”); console.log(“month:” + month); console.log(“point:” + point); myLineChart.addData(points, month); }); 非常感谢。

相邻图表中是否可以进行多级Highchart Drilldown？: 我是高中新手。我在下钻时遇到的问题很少。在钻取中，相同的图表被替换。我们能否给钻出的新图表给出特定的空间（如果我说新的div）？如何在不同的图表中添加更多级别的向下钻取？默认情况下，如果图例中有更多系列，则单击其中一个系列将添加/删除该系列。我们可以使系列仍然可见添加新图表吗？

Highcharts – 系列中的跳过日期: 所以我从数据库中提取一些数据并获取UNIX时间戳和数字。因此，假设N（数字）在D（日期）上出售。有些日子不见了，比如周末。我需要它仍然显示当天，但不需要任何数据。这是折线图。 2010年4月1日，50售出 2010年4月2日，53日售出 2010年4月7日，10日售出（我有超过1000条记录跨越几年 – 所以我也会添加一个缩放）因此图表仍应显示4月1日至7日，但没有3-6的数据。（该线将从2-7开始）。关于如何做到这一点的任何想法？谢谢，乔希

D3.js：删除动态添加的饼图切片: 我能够生成饼图并根据用户交互动态地向其添加数据。这是小提琴http://jsfiddle.net/L5Q8r/ 我面临的问题是从饼图中删除数据。取消选中该复选框后，我将从“数据集”中删除数据并更新图表。图表正在更新，但用户仍然可以看到之前的“切片”。我尝试添加“.exit（）。remove（）”但没有成功。这是我做的： var updateChart = function (dataset) { arcs.data(pie(dataset)) .enter() .append(“path”) .attr(“stroke”, “white”) .attr(“stroke-width”, 0.8) .attr(“fill”, function (d, i) { return color(i); }) .attr(“d”, arc); arcs.data(pie(dataset)).exit().remove(); // Executing but not working arcs.transition() .duration(duration) .attrTween(“d”, arcTween); sliceLabel.data(pie(dataset)); sliceLabel.transition() .duration(duration) .attr(“transform”, function (d) { return “translate(” + (arc.centroid(d)) + “)”; }) .style(“fill-opacity”, […]

谷歌饼图百分比计算: 我有一个以饼图forms显示数据的页面。我使用谷歌图表，这里是代码： google.load(“visualization”, “1”, {packages:[“corechart”]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ [‘Product’, ‘Sale In Percent’], [‘product2’, 5.5], [‘product3’, 7.5], [‘product4’, 1.5], [‘product5’, 8.5], ]); var options = { title: ‘Product Sales’ }; var chart = new google.visualization.PieChart(document.getElementById(‘piechart2′)); chart.draw(data, options); } 这是一个有效的JS FIDDLE： https ：//jsfiddle.net/alex4uthis/j78vmq00/2/ 这里我还有1个产品作为product1，它的值是77.由于这个值总是更高，我从图表中省略了。当我绘制图表时，我们可以看到product2百分比变为23.9％，product3百分比变为32.6等……但是我希望得到饼图绘制与我在’Sale In Percent’列中给出的内容。（表示产品1绘制5.5等…）请帮助我。

如何在Chart.js中为条形图和折线图添加第二个Y轴？: 我试图在Chart.js中添加一个双Y轴进行两次数据集比较。我目前正在使用Leigh Quince的LineBar扩展，这是在这里找到的答案： Chart.js如何获得组合条形图和折线图？大约一年前还有一个针对双Y轴的解决方案，但仅用于折线图，并且它与Nick的主人不同步。似乎有Line和Bar图表，或Double-Y但不是两者。我的问题是我需要将TSAT％（饱和度水平），左Y轴，折线图表示为铁蛋白剂量水平，右Y轴条形图。这就是我需要的样子：（似乎Stackoverflow已经改变了它的颜色，希望你仍然可以读取Y轴刻度）如果有人可以使用解决方案，我将非常感激。当前代码： var data = { labels: [“Jun 2013”, “Jul 2013″,”Aug 2013″,”Sep 2013″,”Oct 2013″,”Nov 2013″,”Dec 2013”, “Jan 2014”, “Feb 2014”, “Mar 2014”, “Apr 2014”, “May 2014”], datasets: [ { label: “TSAT”, type: “line”, fillColor: “transparent”, strokeColor: “#a33a59”, pointColor: “#a33a59”, pointHighlightStroke: “#FFF”, data:[33,32.9,32.9,33.2,33.2,33.2,32.7,32.9,32.9,32.7,32.7,32.7] }, { label: “Ferritin”, […]

Chart.js在饼图上显示标签: 我最近将我的charts.js库更新为最新版本（2.5.0）。此版本不显示图表上的标签。我有一个在提琴手上工作的例子： http ： //jsfiddle.net/g6fajwg8 。但是，我在示例中完全定义了我的图表，但仍无法看到图表上的标签。注意：在Google和Stackoverflow上有很多这样的问题，但大多数问题都与之前的版本有关。 var config = { type: ‘pie’, data: { datasets: [{ data: [ 1200, 1112, 533, 202, 105, ], backgroundColor: [ “#F7464A”, “#46BFBD”, “#FDB45C”, “#949FB1”, “#4D5360”, ], label: ‘Dataset 1’ }], labels: [ “Red”, “Green”, “Yellow”, “Grey”, “Dark Grey” ] }, options: { responsive: true, legend: { […]

Google柱形图 – 为每列显示不同的颜色: 片段 google.load(“visualization”, “1”, {packages: [“corechart”, “bar”]}); google.setOnLoadCallback(drawStuff); function drawStuff() { var timesheetRes = [“Resouce 1″,”Resouce 2″,”Resouce 3″,”Resouce 4″,”Resouce 5”]; var timesheetWeek = [“Week 1″,”Week 2″,”Week 3″,”Week 4″,”Week 5”]; var timesheetHours = [45,40,40,0,0]; var dataArray = [[‘Resources’, ‘Week’, ‘Hours’]]; for (var n = 0; n < timesheetHours.length; n++) { dataArray.push([timesheetRes[n], timesheetWeek[n], timesheetHours[n]]); } var data = […]

Highchart工具提示显示最近点: 我一直试图制作高图工具提示，以显示最近的点，因为x轴值未在不同系列中对齐。这是我到目前为止所得到的 http://jsfiddle.net/Yw8hb/5/ Highcharts.wrap(Highcharts.Tooltip.prototype, ‘refresh’, function (proceed) { var args = arguments, points = args[1], point = points[0], chart = point.series.chart; // Loop over all the series of the chart Highcharts.each(chart.series, function(series) { // This one already exist if (series == point.series) return; var current, dist, distance = Number.MAX_VALUE; // Loop over all the points […]

Highcharts饼图可以有url链接: 我在我的应用程序中使用Highcharts饼图，其中饼图的数据是从数据库填充的。我的问题是填充饼图后，如果我点击某个区域它应该呈现给特定的PHP页面。可能吗？这是我的代码： function open_risk_level_pie() { $chart = new Highchart(); $chart->chart->renderTo = “open_risk_level_pie”; $chart->chart->plotBackgroundColor = null; $chart->chart->plotBorderWidth = null; $chart->chart->plotShadow = false; $chart->title->text = “Risk Level”; $chart->tooltip->formatter = new HighchartJsExpr(“function() { return ”+ this.point.name +’: ‘+ this.point.y; }”); $chart->plotOptions->pie->allowPointSelect = 1; $chart->plotOptions->pie->cursor = “pointer”; $chart->plotOptions->pie->dataLabels->enabled = false; $chart->plotOptions->pie->showInLegend = 1; $chart->plotOptions->pie->colors = array(‘red’, ‘orange’, […]