4

jqPlot のスタイリングに少し問題があります。現在、私はこれを持っています：

ここに画像の説明を入力

このようにするにはかなりの手間がかかりましたが、ここで 1 つ問題が発生しました。左側の線です。私はそれが何であるかを実際に知らないので、それを削除する方法がわかりません!

これは私がこれまでに得たコードです。

  plot = $.jqplot('chart', [values], {
    animate: !$.jqplot.use_excanvas,
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: {
        varyBarColor: true,
      },
      pointLabels: { 
        show: true,
      },
      shadow: false,
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: keys,
        tickOptions: {
          showGridline: false,
          showMark: false,
          fontFamily: 'DosisBold',
          textColor: '#ffffff',
          fontSize: 'larger'
        },
      },
      yaxis: {
        tickOptions: {
          showGridline: false,
          showMark: false,
          showLabel: false,
          shadow: false,
        },
      },

    },
    seriesColors: ["#bc4427", "#df8321", "#949629", "#5e8c41", "#739c9b", "#3483b3"],
    grid: {
      background: '#1d1d1d',
      drawGridLines: false,
      borderWidth: 0.0,
      shadow: false,
    },

    highlighter: { show: false }
  });

y 軸で使用されるレンダラーと関係があるのではないかと感じています。現在、デフォルトのものを使用しているだけです（これは LinearAxisRenderer であると想定しています）。これを CategoryAxisRenderer に変更すると、煩わしい行が削除されますが、マークが表示され、バーの上の数字が正しくなくなります (おそらく、それほど役に立たないでしょう)。

また、CSS を掘り下げて、線の色 #757575 を探しましたが、役に立ちませんでした。また、そのファイルのすべての単一の色を目立つもの (赤など) に変更しましたが、それでも何も変わりません。

それが何かの影であるかどうかはわかりませんが、それらを削除するために（正しい方法を除く）ほぼすべての方法を試しました。まだ何もありません。

誰かが以前にこの問題を抱えていましたか? 何か案は？

4

5 に答える 5

8

今日この問題に遭遇し、yaxis の「drawBaseline」がレンダラーの drawBaseline によって上書きされていることに気付きました。次のように、rendererOptions で drawBaseline オプションを設定する必要があります。

axes: {
    yaxis: {
        rendererOptions: {drawBaseline: false}
    }
}

この jsFiddle を見てください: http://jsfiddle.net/a88MS/1/

問題を確認するには、38 行目をコメントおよびアンコメントしてください。

37 行目はデモンストレーション用です。

于 2013-09-26T18:19:46.203 に答える
2

を使用してみてください：

axes: {
    yaxis: {
       showTicks: false
    }
}

それ以外の場合は境界線である可能性があります（ただし、もう一度borderWidth0に設定すると、同じ効果が得られるはずです）。

grid:{
    drawBorder: false,
    shadow: false
}

両方のオプションが適用されたサンプル。

また、各軸に設定してみてください。

tickOptions: {
    showGridline: false
}
于 2012-07-31T08:50:37.600 に答える
2

まあ、jqPlot オプションを使用して問題を整理することはまだうまくいきませんが、CSS を使用して y 軸全体を非表示にするだけで解決策を見つけました。

これをタグ間の HTML ファイルに追加しただけ<style>ですが、もちろん、使用しているスタイルシートに配置することもできます。

.jqplot-grid-canvas {
    display: none;
}

出来上がり！いまいましい y 軸がついになくなり、私のグラフのスタイリングがきれいになりました。

于 2012-08-01T03:57:40.867 に答える
0

私にとって、次のことがトリックを行いました：

borderWidth : 0それを設定するとそれがアクティブになったので、私はまさに問題である設定をしました！それを削除すると問題が解決しました！

于 2012-11-12T09:14:48.480 に答える