0

http://www.fabieno.com/conanbatt/index.html

円が重なっています。これは、ツールチップがあるためです。これは少し痛いです。これを変更してオーバーラップを停止するにはどうすればよいですか?

また、日付を表示したい方法でフォーマットするにはどうすればよいですか? たとえば、縦と YYYY/dd/mm

https://github.com/FabienO/OpenKaya-1/tree/master/widgets/rank_graph

どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1

1

重なり合う円については、X軸上の位置でゲームが行われた時刻を正確に表すと仮定すると、2つの選択肢があります。

chart.jsの場合：

1）グラフを広くします。

// line 101
var w = $(that.html).parent().width() || 500; //Sometimes this is 0, dont know why.

2）各円の半径を小さくします。

// line 120
var pointRadius = 2;

ボーナスとして、各円に塗りつぶしの色を追加することをお勧めします。

// line 244, replace circles.enter() with the following
circles
    .enter()
        .append('svg:circle')
            .attr('class', 'data-point')
            .style('opacity', 1e-6)
            .attr('cx', function(d) { return x(d.date) })
            .attr('cy', function() { return y(0) })
            .attr('r', function() { return (data.length <= maxDataPointsForDots) ? pointRadius : 0 })
            // On hover, fill the circle
            .on('mouseover', function(d, i) {
              circles.filter(function(p) {
                return d === p;
              })
              .style('fill', 'steelblue');
            })
            // Clear the fill
            .on('mouseout', function(d, i) {
              circles.filter(function(p) {
                return d === p;
              })
              .style('fill', 'white');
            })
        .transition()
        .duration(transitionDuration)
            .style('opacity', 1)
            .attr('cx', function(d) { return x(d.date) })
            .attr('cy', function(d) { return y(d.value) });

X軸ラベルの日付形式について：

// line ~124
var xAxis = d3.svg.axis().scale(x).tickSize(h - margin * 2).tickPadding(10).ticks(7).tickFormat(d3.time.format('%Y/%d/%m'));

それらを回転させるには：

// line ~151
// x ticks and labels
if (!xAxisGroup) {
    xAxisGroup = svg.append('svg:g')
        .attr('class', 'xTick')
        .call(xAxis);
    xAxisGroup.selectAll('text')
        .attr('transform', 'translate(-210, 140) rotate(-45)');
}
else {
    t.select('.xTick').call(xAxis);
}

私はあなたのリポジトリをフォークし、それに対してプルを開いたので、すべての変更を一度に見ることができます：https ://github.com/FabienO/OpenKaya-1/pull/1

于 2012-09-22T07:22:55.877 に答える