标签: fusioncharts

我正在使用jspdf在浏览器中创建PDF.我有多个图表有svg作为图表数据.为了向pdf添加数据,我正在使用canvas将svg转换为png,然后使用canvas.toDataURL方法将Base64 Data转换为png .在所有这些转换之后,jspdf创建的文件大小很大(大约50 MB).下面是图表数据和画布div的代码.

newdiv = document.createElement("div");
newdiv.className = "big_Con_graph big_Con_graph0";
newdiv.style.height = "0px";
newdiv.id = "big_Con_graph" + id;

下面是SVG图表加载的尺寸.

document.getElementById("big_Con_graph" + id).style.display = "block";
var big_chartReference = FusionCharts("big_myChartId"+id);
if(big_chartReference != null){
    big_chartReference.dispose();
}
var big_width = "1088";
var big_height = "604";

现在,下面是转换上面的图形SVG数据并添加到PDF的代码.

var elem_graph = $($('.big_Con_graph,big_Con_graph0')[count]).clone(true);
svgString = $(elem_graph).find("span").html();
var img = document.createElement('img');
var DOMURL = self.URL || self.webkitURL || self;
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = pdfAfterImageLoad(img,pdf,imgLoadSequence,DOMURL,totalReports,reportName);
img.src = …

经过许多小时的寻找解决方案并尝试不同的方法来解决这个问题,我来到这里,我正在使用JQuery Mobile和我的iPad应用程序.

我想要做的是使用Fusion Charts的报告应用程序.我已经使用不同的方法在Web视图(UIWebView)中成功呈现了图表,并且遵循了不同的示例,但我现在要做的是使用JQuery Mobile框架完成相同的任务.

我没有使用phonegap,我已经按照JQuery Mobile + Xcode集成的步骤(我认为).我的桌面和移动浏览器(iPad,iPhone 4和iPod Touch 2G)上的图表加载没有问题,但是他们无法在我的UIWebView中加载(即使我使用的是相同的代码).

这就是我正在做的事情:

1)向项目添加所需文件(JS,CSS和HTML)以在本地使用它们.添加它们后,我将.js扩展名从"Compile Sources"移动到"Copy Bundle Resources".它看起来像这样:

2)将我的HTML测试文件(page_A1.html)加载到Web视图中:

3)检查HTML文件上的所有内容是否都设置了正确的路径和最新版本的框架:

4)构建并运行仅获取空白Web视图.

如果我用这样的警告测试Javascript:

它将显示证明Javascript正在运行的警报:

如果我在应该显示图表的容器上放置一些文本:

我将在Web视图中获取文本:

我还测试了远程框架链接而不是本地版本和旧版本的库,没有运气.没有什么不同的发生:

这对我来说似乎很明显

$(document).ready(function(){

没有被xcode注意或调用.

这就是我想要完成的事情:

我不知道还有什么可以测试.如果您有任何想法,我会感激不尽.

从进出口数据加载Googlesheets到fusioncharts在我的Rails应用程序.

我用来Jquery从Google工作表中获取数据,如本教程中所示https://www.sitepoint.com/interactive-javascript-charts-using-data-from-google-sheets/

undefined local variable or method 'parsedData' for #<GreetingsController:0x007fdb862e9cf8>当我尝试从这个pasedData变量中获取数据时,Rails总是给我这个错误.

data: parsedData

我不确定我在这里做错了什么,这是我第一次使用JSON将数据加载到rails app中的fusioncharts.任何帮助将非常感激

这里是Jquery片段,googlesheets变成了JSON.

var spreadsheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  url = "https://spreadsheets.google.com/feeds/list/" +
  spreadsheetId +
  "/od6/public/basic?alt=json";

$.get({
  url: url,
  success: function(response) {
    var data = response.feed.entry,
      len = data.length,
      i = 0,
      parsedData = [];

    for (i = 0; i < len; i++) {
      parsedData.push({
        label: data[i].title.$t,
        value: data[i].content.$t.replace('income: ', '')
      });
    }

  }
});

这是rails控制器的fusionchart片段

     @chart2 = Fusioncharts::Chart.new({    

     type: …

有没有办法只设置Fusionchart图"数据"属性.因为当前在后一阶段设置数据时,需要传递具有"数据"和"图表"属性的完整json对象.

以下是我的示例代码;

FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        id: 'total-users',
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '450',
        height: '300',
        dataFormat: 'json',
            "chart": {
                "caption": "Sample Graph",
                "enableSmartLabels": "0",
                "showPercentValues": "1",
                "showTooltip": "0",
                "decimals": "1",
                "theme": "ocean"
            },
            "data":null
        });
    ageGroupChart.setJSONUrl( "http://www.example.com/GetData.php" );
    ageGroupChart.render(); 
});

如您所见,我正在设置来自在线资源的数据.如果在线资源不需要将"图表"属性与数据一起发送,我更愿意.因此,我可以将UI外观与数据源分开.

有任何想法吗？

我有一个像下面这样的 JSON 响应，

[{label: "8", value: "1", value2: "0", value3: "0"},{label: "9", value: "7", value2: "2", value3: "6"},{label: "10", value: "12", value2: "1", value3: "0"},…]

现在我想为每个键将它拆分为 4 个 JSON 对象，如下所示。

[{label: "8"},{label: "9"},{label: "10"},…]
[{value: "1"},{value: "7"},{value: "12"},…] 
[{value2: "0"},{value2: "2"},{value2: "1"},…] and more

我尝试了以下事情，但没有成功。

尝试1：

var o2 = { uhash: o.uhash };
delete o.uhash;

尝试2：

使用 for 循环获取每一对、array.push 和 JSON.stringigy() 方法。

我想要的只是使用来自数据库的 JSON 响应创建一个堆叠的 fusioncharts

我使用过"multilevelpie"图表.由于图表中的数据较少(例如10或1),标签名称将与另一个合并.

我已附上截图与消息,请考虑并给我一个解决方案

请检查JsFiddle重新生成的问题..我还附加了图像,奇怪的错误

Js小提琴的例子

FusionCharts.ready(function () {
var topProductsChart = new FusionCharts({
    type: 'multilevelpie',
    renderAt: 'chart-container',
    id : "myChart",
    width: '500',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Split of Top Products Sold",
            "subCaption": "Last Quarter",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "baseFontColor" : "#333333",
            "baseFont" : "Helvetica Neue,Arial",   
            "basefontsize": "9",
            "subcaptionFontBold": "0",
            "bgColor" : "#ffffff",
            "canvasBgColor" : "#ffffff",
            "showBorder" : "0",
            "showShadow" : "0",
            "showCanvasBorder": "0",
            "pieFillAlpha": "60",
            "pieBorderThickness": "2",
            "hoverFillColor": "#cccccc",
            "pieBorderColor": "#ffffff",
            "useHoverColor": "1",
            "showValuesInTooltip": "1",
            "showPercentInTooltip": …

客户端图表或服务器端图表？

(我看过一些基于这个主题的问题,但没有一个得出结论.)

我目前正在评估客户端图表(javascript图表).
我发现很多文章都说客户端图表很好.
背后的主要原因是它节省了服务器之旅.现在切换到客户端图表应该有一些原因.一些统计数据.

• 我的Web应用程序涉及高数据操作.
• 在很大程度上需要在图表上进行客户端交互.

在性能方面,使用客户端和服务器端之间的确切区别是什么.一个优于另一个 的优点是什么？

我在我的网络应用程序中一起使用AngularJS和FusionCharts。即将发布的 AngularJS v1.3.0将要求<base>在 HTML head 中有一个标签，以便解析所有相关链接，无论应用程序在站点目录中的何处托管。

在<base>最新版本的 FusionCharts（当前为 v3.4.0）中包含标签时，3D 图表无法正确呈现。例如，3D 饼图出现并具有旋转和可点击切片，以及切片内边缘的工具提示和颜色。然而，整个外部颜色是黑色的。

排除<base>标签会使图表看起来和行为正常。

有谁知道如何解决这个问题？不幸的是，我不拥有源代码，否则我会自己破解它。

这是非工作 jsFiddle 的链接：http : //jsfiddle.net/aaronaudic/59Bmf/207

解决方案：

我最初将正确的解决方案授予@pankaj，因为他在页面加载时简单地添加以下行的解决方案似乎解决了问题：

document.getElementsByTagName("base")[0].setAttribute("href", window.location.pathname+window.location.search);

但是，这仅在图表位于初始加载页面时有效（当用户直接导航到带有图表的页面时）；当通过类似的方式导航到页面时ui-router，我仍然看到黑色。

正确答案来自@Shamasis。将以下内容添加到页面加载将解决应用程序范围内的问题：

eve.on('raphael.new', function () {
    this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
});

他最初的警告提到导出功能可能会受到云端的阻碍，这可能是（我不从云端导出）。但是，正如在这个 jsFiddle 中所观察到的那样，在本地导出效果非常好：http : //jsfiddle.net/aaronaudic/Gs6sN/14

我在页面头部的基本标签很简单：

<base href="/">

我试图使用PHP pdo使用非弃用技术转换由下面的代码获得的数组:

$stm = $conn->prepare("SELECT * FROM mysqltable");
$stm->execute();
$results = $stm->fetchAll(PDO::FETCH_ASSOC);
print_r($results);

使用融合图所需的以下格式

[
{
label: "CJ Anderson",
value: "25"
},
{
label: "Imran Tahir",
value: "25"
},
...
...
] 

原始数组如下:

Array (
    [0] => Array (
        [Id] => 6 
        [Number] => 1234567890 
        [Visits] => 1 
        [Name] => John 
    )
    [1] => Array (
        [Id] => 7 
        [Number] => 1236549871 
        [Visits] => 9 
        [Name] => Jerry 
    )
    [2] => Array (
        [Id] => 8 
        [Number] => 2147483647 
        [Visits] …

import FusionCharts from "fusioncharts";
import charts from "fusioncharts/fusioncharts.charts";
import ReactFusioncharts from "react-fusioncharts";
import React from 'react';


// Resolves charts dependancy
charts(FusionCharts);

const dataSource = {
  chart: {
    caption: "Amazon Prime Video Categorization",
    theme: "fusion",
    viewmode: "1",
    showrestorebtn: "0",
    valuefontcolor: "#FFFFFF",
    yaxismaxvalue: "1000",
    yaxisminvalue: "0",
    divlinealpha: "0"
  },
  dataset: [
    {
      data: [
        {
          id: "01",
          label: "Home",
          x: "50",
          y: "900",
          shape: "rectangle",
          width: "80",
          height: "40"
        },
        {
          id: "02",
          label: "TV Shows",
          x: "20",
          y: "500",
          shape: "rectangle", …