Tag: 图表

当图表没有数据时显示无数据消息

我想在图表没有数据时显示没有数据消息。 这是对的吗？ var ctx = document.getElementById(‘mycanvas’).getContext(‘2d’); var chart = new Chart(ctx, { type: ‘doughnut’, data: { labels: [“aa”, “bb”, “cc”, “dd”], datasets: [{ label: “My First dataset”, backgroundColor: [‘red’, ‘blue’, ‘green’, ‘yello’], data: data.length ? data: [{ label: “No Data”, value: 100 }], }] }, options: { legend: { position: ‘right’, labels: { boxWidth: 12 […]

垂直日视图时间甘特图/时间线（类似于Outlook） – jQuery库

我需要创建一个垂直的“时间轴”图表，增量为1小时30分钟，15分钟或5分钟。 该function类似于Outlook或“日视图”计划程序，其中约会作为时间轴上的框放置。 我考虑过以下但有以下问题： Google Visualization，Vis.JS – 仅限水平时间轴，不支持垂直时间轴 jQuery FullCalendar.io，DayPilot – 某些function仅在Premium版本中提供，价格为500美元。 FullCalendar：DayTimeline View是优质的，DayPilot：非1hr增量是溢价 原始的免费工具，如jQuery Skeduler，不支持任何自定义间隔或真正的Date对象，我必须自己重绘标尺，或者自己实现重叠 关于这个问题的任何建议？ 我甚至可以使用电子表格吗？ 所需function： 8:00 ——— 8:30 […….] 9:00 ——— 9:30 […][..]

没有克隆的jQuery轮播

我在我的网站上使用CanvasJS（ http://canvasjs.com/ ）来制作图表，但是我想把它们放在旋转木马上，结果说起来容易做起来难。 我尝试了一些不同的jQuery轮播插件，但它们似乎都有共同的克隆，我无法使用CanvasJS。 基本上我发现的旋转木马会创建可见元素的克隆，并将它们放在视口外面以完成循环。 它克隆了CanvasJS所需的所有canvas元素，但不包括仅在原始元素上绘制的实际图表。 是否有任何不使用克隆的轮播插件，或者是否有另一种解决方案可以使滑动CanvasJS图表工作？

渲染后在javascript中旋转圆环图

总而言之，我有一个客户要求使用高级图表创建圆环图，然后能够通过移动触摸移动事件或桌面上的鼠标移动事件来旋转圆环和标签。 我的客户正在使用hammer.js，jquery和high chart。 我不知道如何让圆环图旋转。 任何人都可以分享一些想法/样本或了解其他可能已经这样做过的图书馆吗？ 这是一个高图表示例http://jsfiddle.net/skumar2013/nsDzn/圆环图。 任何帮助是极大的赞赏。 $(function () { var colors = Highcharts.getOptions().colors, categories = [‘MSIE’, ‘Firefox’, ‘Chrome’, ‘Safari’, ‘Opera’], name = ‘Browser brands’, data = [{ y: 55.11, color: colors[0], drilldown: { name: ‘MSIE versions’, categories: [‘MSIE 6.0’, ‘MSIE 7.0’, ‘MSIE 8.0’, ‘MSIE 9.0’], data: [10.85, 7.35, 33.06, 2.81], color: colors[0] } }, […]

选择外部点击事件谷歌图表上的散点图点

我有一个包含john和smith的外部ul li列表，这个列表不是散点图的一部分（这里没有定义html代码） 。 当用户单击john或smith时，应选择散点图的相关点，并将其颜色从蓝色更改为红色。 其次我使用google.visualization.events.addListener（scatterChart，’select’，tableSelectHandler）; 改变点颜色，但它的颜色没有改变。 这两种情况有没有解决方案？ 我使用以下代码。 var jsonData = ‘[[{“type”:”number”,”label”:”row”},{“type”:”string”,”label”:”Screen Name”},{“type”:”number”,”label”: “Followers Count”},{“type”:”number”,”label”:”Following Count”},{“type”:”datetime”,”label”:”Date”}],[1,”john”,215,263,”Date(2016,1,10,17,07,38)”],[1,”smith”,315,363,”Date(2016,1,10,18,07,38)”]]’; var data = google.visualization.arrayToDataTable(jQuery.parseJSON(jsonData)); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById(‘dashboard_div’)); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ ‘controlType’: ‘NumberRangeFilter’, ‘containerId’: ‘filter_div’, ‘options’: { ‘width’: “100%”, ‘filterColumnLabel’: ‘row’, ‘minValue’: 1, […]

如何在调用时使用键盘侦听器触发工具提示？

我有一个简单的饼图 。 单击饼形楔形时，将显示该楔形的工具提示。 我正在尝试实现相同的function，但在饼图的div元素OUTSIDE上。 场景： 专注于“Cat 1”div和点击输入的用户显示Cat 1楔形的工具提示 专注于“Cat 2”div和点击输入的用户显示Cat 2楔形的工具提示 专注于“Cat 3”div和点击输入的用户将显示Cat 3楔形的工具提示 我尝试过以下方面的事情： function ShowTooltip() { d3.selectAll(‘.nvtooltip’).each(function(){ this.style.setProperty(‘display’, ‘block’, ‘important’); }); }; 但是，如果你在plunkr中看到，那不会触发任何东西。 如何让这些潜水触发相应的工具提示？ $(document).keydown(function(event) { // Capture only if enter key is pressed and .myDiv has focus if (event.keyCode === 13 && $(‘.cat-count’).is(‘:focus’)) { console.log(‘do something’); ShowTooltip(); } });

为什么在我刷新之前不会加载谷歌图表

我一直在使用谷歌图表一段时间没有任何问题。 我的代码根本没有改变，但最近我的图表还没有加载，直到我刷新浏览器几次，等待，然后再次刷新。 当图表加载时它们很好。 我可以去其他页面然后回来，他们立即加载。 我会说现在我在我的html之后而不是之前加载我的jquery，这会加倍确保页面在jquery之前加载。 我正在使用mozilla firefox。 如果我不关闭浏览器一切都很好，但只要我关闭浏览器并返回页面，图表就不会立即显示。 这让我觉得一旦它在缓存中一切都很好，但我认为从谷歌图表中获取loader.js存在问题。 我使用以下内容包含谷歌图表 然后我包括我的jquery 最初我没有把我的代码放在文档中，但我最近添加了这个，以确保在运行我的代码之前已经加载了页面。 然后这是我的charts.js jQuery代码加载图表（我显然包括jquery，但这里没有显示） $(document).ready(function(){ $.post(“database/home/ajax/ajax.php”, {CODE:”loadCharts”}, function(data){ google.charts.load(‘current’, { callback: function () { myData1=data.chart.splice(0,data.salesCount); myData2=data.chart.splice(0,data.expensesCount); myData3=data.chart.splice(0,data.hrcostCount); drawBarChart(‘total_sales_chart’,myData1,”Total Sales Last Six Months”,”Sales”); drawBarChart(‘total_expenses_chart’,myData2,”Total Expenses Last Six Months”,”Expenses”); drawBarChart(‘total_hr_chart’,myData3,”Total HR Costs Last Six Months”,”HR Costs”); function drawBarChart(id,myData,title,axis) { var data = new google.visualization.DataTable(); data.addColumn(‘date’, ‘Month’); data.addColumn(‘number’, […]

谷歌图表图表设置图例值和相同的颜色列

data = [[“product1”，3.6126719999999977]，[“product2”，6.827597999999999]，[“product2”，1008.0]]当我使用数组数据并在列或条形图中实现时间显示为图例值而不是’不同产品名称’和所有条形图看起来都是相同的颜色列。 我想将图例名称作为产品名称和不同颜色添加到所有列 google.charts.load(‘current’, { packages: [‘corechart’] }).then(function () { $.ajax({ url: ‘path to data’, dataType: ‘json’ }).done(function (jsonData) { loadData(jsonData); }).fail(function (jqXHR, textStatus, errorThrown) { var jsonData = [[“product1”,450],[“product2”,23],[“product3”,1008.0]]; loadData(jsonData, ‘1’, ‘Column’); }); // load json data function loadData(jsonData, id, chartType) { // create data table var dataTable = new google.visualization.DataTable(); switch (chartType) […]

使用JSon获取Facebook状态更新

对于我目前的大学项目，我需要获取公共Facebook状态更新，其中人员将消息命名为最佳状态，并且最好能够将其打印在安装件中。 我已经环顾了一下但并没有完全得到它。 我已经查看了本书的开源代码，但这似乎并不完全是自我解释的。 我知道我需要使用JSon并使用https://graph.facebook.com/search?q=QUERY&type=post&fields=id,name,message,picture将显示所有Facebook状态’与该搜索词呈现此： { “data”: [ { “id”: “1004039579_403516679661483”, “name”: “Donna Durbin’s Photos”, “message”: “DUMPED at 14!!! I can’t imagine what is going through his head poor oh boy Thank God I don’t work in a shelter I would be in jail already…Let’s HELP this Senior find his FINAL home to rest…plse plse p […]

馅饼（甜甜圈）图表

有人可以建议我任何关于如何创建类似于下图中的图形的好插件吗？ 如果有人知道使用谷歌图表这样做的方法是最佳的。 谢谢