Question

在我在大学的一个项目中，我使用gRaphael创建了以下线图，但我想使用任何库将其更改为条形图，除了谷歌图表。< / p>

我尝试用gRaphael做到这一点，但gRaphel在其网站上的所有条形图示例都没有轴!!!这很奇怪。

我需要做的是显示完全相同的东西，但使用线图而不是条形图。我没想到会那么难。

我也看到了d3js库，看起来非常好，但是我不知道如何在那里转换这些代码，因为当用户盘旋在一个柱上时，应该能够看到它的价值。我没有在d3js barcharts找到这个悬停功能。

一般来说，这个折线图的作用是显示x轴的日期和y轴的值。由于gRaphael不接受日期作为值，我所做的不是日期，而是设置1,2,3等，以便graphael创建图表，之后我更改x轴上的标签以显示真实日期。此外，当用户悬停在一个点上时应该能够看到它的值。

因此显示轴，带有日期和悬停的轴就是我想要的潜在图表。

任何人都可以给我任何建议，或者帮我在graphael条形图或任何其他免费图表库（如d3js）上这样做吗？

<script>
        window.onload = function () {
            var r = Raphael("holder"),
                txtattr = { font: "20px sans-serif" };

            var lines = r.linechart(80, 30, 600, 400,[1,2,3,4,5],[1.34,3.43,2.52,2.63,3.12], {type:"soft", axisxstep : 13,nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: false }).hoverColumn(function () {
                this.tags = r.set();
                for (var i = 0, ii = this.y.length; i < ii; i++) {
                    this.tags.push(r.tag(this.x, this.y[i], Number(this.values[i]).toPrecision(5), 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
                }
            }, function () {
                this.tags && this.tags.remove();
            });
            var date = new Date(1356998400000);
            var someDate = new Date(date);

            //For the x axis
            $.each(lines.axis[0].text.items , function ( index, label ) {
                //Has all the initial x values we got from the beginning as a date
                //We get the corresponding date from the value x
                //i.e. for value 3 we get 3/6/2014
                //This function replaces the values we had (numbers 1,2,3...) with the corresponding date
                someDate = new Date(date);
                someDate.setDate(date.getDate() );
                var jan312009 = new Date(2009, 1-1, 31);
                var newDate = new Date(new Date(someDate).setMonth(jan312009.getMonth()+Number(label.attr("text"))));
                var dd = newDate.getDate();
                var mm = newDate.getMonth() + 1;
                var y = newDate.getFullYear();
                var someFormattedDate = mm + '-'+ y;
                label.attr({'text': someFormattedDate});
            });
            lines.symbols.attr({ r: 6 });
        };
    </script>

非常感谢

Javascript线图到条形图

0 个答案: