标签: charts

我在我的项目中多次使用过chart.js,但我从未使用过d3.js. 很多人说d3.js是图表最好的javascript框架,但没有一个能解释原因,尤其是当我想要与chart.js进行比较时.

我发现了这个:http://www.fusioncharts.com/javascript-charting-comparison/ 但它不是我想要的.

有没有人知道这些框架在可用性和性能方面的比较(仅适用于图表)？

Scott Gu刚刚发布了由.NET团队分发的一组新的图表控件.它们看起来令人难以置信:http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt. ASPX

百万美元的问题是......他们会与MVC合作,如果是的话,什么时候？

更新:这是一个显示问题的jsfiddle:http://jsfiddle.net/pynju/1/

点击星期一的蓝色栏目.加载详细视图时,请注意01-07有3列(预期为2).单击最高的栏以返回原始视图.请注意,xAxis上的标签未被删除.

===============

我有一个条形图,有2个系列,并排显示为成对的条形图.

series: [{
         showInLegend: false,
         data: dowChartData
      },{
         showInLegend: false,
         data: avgUserDowChartData
      }],

.

dowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   {
                y: 98.74,
                color: '#0072ff',
                drilldown: {
                   name: 'Category Engagement - Sunday',
                   categories: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
                   data: [0,637,0,0,0,173,48.54,48.54,0,0,0,0,0,0,102.24,166.36,706.59,699.18,298.32,184.14,97.08,1539,0,1224.56],
                   color: '#0072ff',
                   data2: [506.80686467275,354.56354558498,333.25158689567,234.19283190879,234.82132336088,220.03247578171,222.86420797556,218.14034615202,170.42559544164,171.54776353196,249.24788461442,345.14915669555,206.65543589797,243.38811965637,367.02593304906,378.83677778129,467.45739743621,424.26264387522,639.60922934374,679.71299714907,373.26353846375,480.94380626458,551.82326068362,466.77469230724],
                   color2: '#C00'
                }
             }
AND SIMILAR

.

avgUserDowChartData = [                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         {
                y: 142.35,
                color: '#C00'
             },
AND SIMILAR

初始数据是星期几数据,X轴为:星期日 - 星期一 - 星期二 - 星期三 - 星期四 - 星期五 - 星期六

初始系列有一个带有新数据和数据2的钻取元素(见上文)

以钻取演示代码为例,我已经有了这个代码:

column: {
              borderWidth: 0, …

我在使用charts.js关闭动画时遇到了一些麻烦.

这是我的代码:

var pieData = [
    {
        value: 30,
        color:"#F38630"
    },
    {
        value : 50,
        color : "#E0E4CC"
    },
    {
        value : 100,
        color : "#69D2E7"
    }    
];

var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);

谁能提供一个例子？

我需要一个相当聪明的算法来为图形(图表)提出"漂亮"的网格线.

例如,假设条形图的值为10,30,72和60.您知道:

最小值:10最大值:72范围:62

第一个问题是:你从什么开始？在这种情况下,0将是直观的值,但这不会阻碍其他数据集,所以我猜:

网格最小值应为0或低于范围内数据最小值的"nice"值.或者,可以指定.

网格最大值应该是该范围内最大值之上的"漂亮"值.或者,可以指定它(例如,如果显示百分比,则可能需要0到100,而不管实际值如何).

应该指定范围内的网格线(刻度线)的数量或给定范围内的数字(例如3-8),使得值"好"(即圆数)并且最大化图表区域的使用.在我们的例子中,80将是一个合理的最大值,因为它将使用90%的图表高度(72/80),而100将产生更多的浪费空间.

有人知道这个算法很好吗？语言是无关紧要的,因为我将按照我的需要实现它.

我正在使用matplotlib生成(垂直)条形图.问题是我的标签很长.有没有办法在栏中或上方或下方垂直显示它们？

我目前正在进行一项小型家谱实验,并希望实现一个简单的家谱,如下图所示.

到目前为止,最好的搜索结果只产生了一个例子,其中一个孩子只能有一个父节点.但我需要的是能够在实体(从父亲到母亲)和节点与其他链接(从子节点到父母链接)之间建立链接.目前我没有固定的数据模式.

我为此选择了d3.js 因为它看起来能够胜任这项工作.我只是不知道如何开始甚至从哪里开始.关于d3.js的教程仅涵盖条形图等标准图表.

我希望有人可以帮助我.

如何隐藏chart.js中显示的x轴标签/文本？

设置scaleShowLabels:false仅删除y轴标签.

<script>
    var options = {
        scaleFontColor: "#fa0",
        datasetStrokeWidth: 1,
        scaleShowLabels : false,
        animation : false,
        bezierCurve : true,
        scaleStartValue: 0,
    };
    var lineChartData = {
        labels : ["1","2","3","4","5","6","7"],
        datasets : [
            {
                fillColor : "rgba(151,187,205,0.5)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                data : [1,3,0,0,6,2,10]
            }
        ]

    }

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);

</script>

我有一个关于Chart.js的问题.

我使用提供的文档绘制了多个饼图.我想知道如果单击其中一个图表的某个切片,我可以根据该切片的值进行ajax调用吗？

例如,如果这是我的 data

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
], 

我是否可以点击Red标记的切片并调用以下形式的网址: example.com?label=red&value=300？如果是,我该如何解决这个问题？

我使用Chartjs来显示图表,我需要设置y轴的标题,但在文档中没有关于它的信息.

我需要像在图片上一样设置y轴,或者在y轴的顶部设置,所以有人可以现在是什么参数

我在官方网站上看过,但没有关于它的信息