Javascript折线图到条形图

Question

在大学里的一个项目中，我使用gRaphael创建了以下折线图，但是我想使用除Google图表以外的任何库将其更改为条形图。

我尝试使用gRaphael进行此操作，但是gRaphel在其站点上的所有barchart示例都没有轴！ 觉得很奇怪

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

我还看到了d3js库，它看起来确实不错，但我不知道如何在此处转换此代码，因为当用户将鼠标悬停在栏上时，应该能够看到它的价值。 我在d3js条形图上找不到此悬停功能。

通常，此折线图的作用是在x轴上显示日期，在y轴上显示值。 由于gRaphael不接受日期作为值，因此我要做的是代替日期，我设置了1,2,3等，以便让graphael创建图表，然后更改x轴上的标签以显示真实日期。 另外，当用户将鼠标悬停在某个点上时，应该能够看到其值。

因此，显示轴，带有日期和悬停的轴是我从潜在图表中所需的全部内容。

谁能给我任何建议，或在graphael barchart或任何其他免费图表库（例如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>

非常感谢