2017-01-09 16 views
1

Morris Line Chartを次のコードで実装しました。これはうまくいきます。Y軸モリス線からドットを取り除く

しかし、私は2番目の行の名前に目標をいくつか変更する必要があります。あなたは毎月点が来るのを見ました。私はその線からこれらの点を取り除き、私が直線になるようにしたい。

Morris.Line({ 
    element: 'line-chart', 
    data: JSON.parse(GraphData), 
    xkey: 'title', 
    ykeys: ['goal', 'actual'], 
    labels: ['Goal', 'Actual'], 
    xLabelFormat: function(x) { // <--- x.getMonth() returns valid index 
    var month = months[x.getMonth()]; 
    return month; 
    }, 
    dateFormat: function(x) { 
    var month = months[new Date(x).getMonth()]; 
    return month; 
    }, 
    resize: true, 
     lineColors: ['#ecb201', '#1B17BB'], 
     gridTextFamily: "'Nunito', sans-serif", 
     gridTextWeight: '300', 
     gridTextSize: 11, 
     gridTextColor: '#090b0d', 
     pointSize: 4, 
     lineWidth: 2, 
     pointStrokeColors: ['#ffffff', '#ffffff'], 
}); 

Morris Line Chart

+0

私はそのようなパラメータがあなたの要件を満たすために利用できるとは思わない、私はあなたがCSSのトリックを使用することができると思います –

+0

どのcssのトリックは説明できますか? –

+0

私は、しようとしています、しばらく待ってください。成功すれば確実に更新されます –

答えて

2

0セットポイントサイズにポイントサイズを変更してください:0このスクリプト

Morris.Line({ 
    element: 'line-chart', 
    pointSize: 0, .... 
)} 
+0

答えをありがとう、私は2番目の行にはドットがないようにします。最初の行にドットが表示されます –

+0

したがって、系列データを指定し、各系列に対してプロパティpointSizeを設定する必要があります。 – MaoStream

1

使用初めに、グラフを描画した後。

$(document).ready(function(){ 
     $('circle[fill="#ecb201"]').each(function(i,el) { 
      //console.log($(this).attr("r" , 0)); 
      $(this).removeAttr("r"); 
      $(this).removeAttr("cy"); 
      $(this).removeAttr("cx"); 

     }); 
    }); 

ただし、ホバー上にこれらのポイントが再び表示されます。それは問題だけです。

+0

私は2番目の行だけではなく、両方を真っ直ぐにしたい。 回答ありがとう –

+0

これはいいですが、オンホバーポイントが再び発生します。あなたがこの中で私を助けてくれるなら、私はあなたに多くの感謝をします –

+0

あなたはそれを感謝しています 私はまたホバリングのスタイルを取得しようとしています –

関連する問題