标签: canvasjs

我正在研究CANVASjS并构建一个在图表上显示数据的示例应用程序.我已经启用export保存在图表.png及.jpeg和打印也.虽然ripple emulator在导出上部署它是完美的,但是当我部署它时android device它不起作用.下面是我启用导出的代码部分.

var chart = new CanvasJS.Chart("container", {
            zoomEnabled: true,
            zoomType: "xy",
            animationEnabled: true,
            animationDuration: 2000,
            exportEnabled: true,
// all other chart code 
});

更新1:

 function drawChart(data)
            {
                var chart = new CanvasJS.Chart("container", {
                    zoomEnabled: true,
                    zoomType: "xy",
                    animationEnabled: true,
                    animationDuration: 2000,
                    exportEnabled: true,
                    exportFileName: "Column Chart",
                    title: {
                        text: "Energy vs Date Time"
                    },
                    axisY: {
                        title: "EnergykWh",
                        interlacedColor: "#F8F1E4",
                        tickLength: 10,
                        suffix: "k",
                    },
                    legend: …

免责声明：我不想破解 canvasJS 或避免为此付费。我只是对用于许可证管理的方法感到好奇

CanvasJS 附带了 30 天的试用许可证，但是这个时间是如何管理的？

由于文件直接从客户端下载到画布服务器（没有我的应用程序服务器的任何信息），他们如何知道我的应用程序服务器使用 canvasJS 超过 30 天？

另外，如果站点 A 使用的是付费版本的 canvasJS，他们如何设法避免人们在任何其他网站上使用 javascript？

我在使用CanvasJS生成图表时遇到问题。

基本上我是从API获取数据的，我可以查看并检查JSON数组，但是当我为图表生成dataPoint时，我会遇到2个错误：数据字段上的数据无效和值字段上的NaN。

有人可以给我提示吗？

// Fetching the data
fetch('https://appbe-dev.clearvuesystems.co.uk/demandForecast/getLiveLineDataEverySecRestApi').then(response => {
  return response.json();
}).then(data => {
  // Work with JSON data here
 var jsonData = data;
 // Generating Data Points
 var dataPoints = [];

for (var i = 0; i <= jsonData.length - 1; i++) {
    dataPoints.push({ y: new Date(jsonData[i].source_ts), x: Number(jsonData[i].renewablesobligationconsumption) });
    console.log(dataPoints);
}

var chart = new CanvasJS.Chart("chartContainer", {
    data: [
        {
            dataPoints: dataPoints,
            type: "line",
        }
    ]
});

chart.render();
}).catch(err => {
 throw new …

使用 React 功能组件，我无法找到一种方法来使用异步接收的动态数据为图表制作动画。下面的沙箱说明了模拟异步读取的计时器的问题。

https://codesandbox.io/s/basic-column-chart-in-react-canvasjs-0gfv6?fontsize=14&hidenavigation=1&theme=dark

运行示例代码时，您应该看到 5 个高度增加的竖条动画。然后，在 5 秒后，它立即切换到 4 个下降高度的小节。我希望有那个更新动画。

以下是我查看过的一些参考信息： CanvasJS React Demos：其中许多在初始绘制时动画，但我找不到在初始渲染后加载动态数据的动画。

使用 JSON 数据的图表是一个具有动态数据但没有动画的演示。

查看 CanvasJS 论坛，我找到了几个链接，但没有一个是针对 React 功能组件的

来自 Canvas 团队的 Vishwas说：

要动态更新数据点并为图表设置动画，您可以实例化图表，通过图表选项更新数据点，然后调用 chart.render，如此更新的JSFiddle所示。

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Animation test"
  },
  animationEnabled: true,  
  data: [{
    type: "column",
    dataPoints: []
  }]
});

chart.options.data[0].dataPoints =  [{ label: "Apple", y: 658 },
                                     { label: "Orange", y: 200 },
                                     { label: "Banana", y: 900 }];
chart.render();

这个示例是纯 JS，但我尝试将原理调整到我的 React …

我使用这个库对音频文件进行 fft，之后我想用canvasjs可视化结果，但我不知道如何做到这一点。

我不确定应该使用什么 asx和yaxes。如果是频率和幅度，怎么办？最大x轴值应等于最大频率，如果是，则步长值是多少？（我计算了幅度和最大频率）。

如果有人能提供帮助，我将不胜感激。

编辑：我尝试重现这个，但我得到了以下结果。幅度并没有那么糟糕，但相位却很可怕。我认为这Math.atan2()将是问题所在，因为这是根据两个数字计算的，所以我尝试使用 Math.js 和数组，但得到了相同的结果。（链接中的预期结果）

    for (var i = 0; i < 10 - 1/50; i+=1/50) {
      realArray.push(Math.sin(2 * Math.PI * 15 * i) + Math.sin(2 * Math.PI * 20 * i));
    }

    //Phase
    counter = 0;
    for (var i = 0; i < realArray.length ; i++) {
      rnd.push({x: i, y: (Math.atan2(imag[counter], realArray[counter]) * (180 / Math.PI))});
      counter++;
    }

    //Magnitude
    counter = 0 …

我创建了一个测试图表,它工作正常.我想通过ajax获取我的数据,而不是嵌入网页.我想我需要格式化我的dataPoints数组({ x: new Date(2009, 0), y: 15 },),以便它们可以在外部JSON文件中使用.在我的示例中,填充我的图表的数据格式为:

我的JSChart小提琴示例

{
  name: "File Sharing",
  showInLegend: true,
  type: "stackedColumn100",
  color: "#4192D9 ",
  indexLabel: "{y}",
  dataPoints: [
    { x: new Date(2009, 0), y: 15 },
    { x: new Date(2010, 0), y: 15 },
    { x: new Date(2011, 0), y: 12 },
    { x: new Date(2012, 0), y: 10 },
    { x: new Date(2013, 0), y: 12 },
    { x: new Date(2014, 0), y: 10 }
  ]
},

我查看了Canvas JS站点,他们使用了以下Ajax调用示例:

var dataPoints …

我想显示一个接受用户输入的表格，例如国家的详细信息和在任何冠军联赛中获得的奖牌数量，并在提交表单时使用 javascript 将其显示为条形图。

我正在尝试为我的 CanvasJS 背景添加透明度。CanvasJS 使用 backgroundColor 来选择画布背景的颜色。

我尝试写“无”而不是颜色代码，但它给了我黑色背景。

能够为背景选择不同的不透明度也很好。

我正在使用CanvasJS并且总是在这里使用这些行:

var chart = new CanvasJS.Chart("chartContainer",
   {
    ...
    });
    chart.render();

不幸的是,我不知道这些线路在做什么.有人可以向我解释一下吗？非常感谢你!

我正在使用canvasjs创建图表.但试用版水印出现在图表的底部.无论如何要删除这个标记？