用于CIE图表的Jquery插件或HTML画布插件

Question

我变得疯了。 我需要在我的网站上嵌入一些监视器和电视测量，我需要生成运行时一些CIE和色域图。

我找到了chart.js，但我找不到任何插件来生成这种类型的图表。

有什么建议吗？

Answer 1

色度图

我没有听说任何可以处理Chromaticity Diagrams的JS图表框架。 Wolfram在这里有一个可嵌入的“玩家”：http://demonstrations.wolfram.com/CIEChromaticityDiagram/。您可能需要创建自己的。

1. 使用CIE图像作为画布元素的背景绘图区域。 （维基百科有一个很好的CIE形象）。
2. 使用JQuery根据您的计算在图像上绘制点。

可以找到工作中的画布元素示例here和here。

Javascript还有许多其他图表框架。请在此处查看比较：http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_frameworks

chart.js

入门

chart.js可用于在您的网站上创建图表。请执行以下操作：

1. 下载chart.js
2. 在此处查看chart.js文档 - http://www.chartjs.org/docs/
3. 确定您的数据来源。这可以是数据库，文件或内联源。
4. 通过ajax调用获取数据。 （http://www.w3schools.com/jquery/jquery_ajax_intro.asp）

数据对象如下所示：

var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [{
    fillColor: "rgba(225,0,0,1)",
    data: [12, 16, 13, 15, 18, 21] // 6 data points relating to the months above
    },
    {
    fillColor: "rgba(0,26,225,1)",
    data: [18, 16, 17, 17, 18, 16]
    }
]}

您可以使用选项变量调整许多图表选项：

var options = { 
    scaleOverlay: true,
    scaleShowGridLines: true,
    scaleOverride: true,
    scaleSteps: 4,
    scaleStepWidth: 5,
    scaleStartValue: 0,
    scaleLineColor: "rgba(0,0,0,.1)",
    // ...
};

要实例化新图表，请使用：

var TheChartElement = document.getElementById('AChart').getContext("2d");
var NewBarChart = new Chart(TheChartElement).Bar(data, options);