2

少し助けが必要なグラフを作成しています。（私はたくさんグーグルで検索しましたが、それがなぜ尋ねるのか成功できません。 - 可能であれば重複して申し訳ありません。）ここに画像の説明を入力

私のコード:

var plot2 = $.jqplot('distance_graph', data.distance, {
                // The "seriesDefaults" option is an options object that will
                // be applied to all series in the chart.
                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {fillToZero: false},
                    pointLabels: { show: true },
                },
                // Custom labels for the series are specified with the "label"
                // option on the series option.  Here a series option object
                // is specified for each series.

                // Show the legend and put it outside the grid, but inside the
                // plot container, shrinking the grid to accomodate the legend.
                // A value of "outside" would not shrink the grid and allow
                // the legend to overflow the container.
                legend: {
                    show: true,
                    placement: 'outsideGrid'
                },
                axes: {
                    // Use a category axis on the x axis and use our custom ticks.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        label: 'Date',
                        ticks: ticks,
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        tickOptions: {
                            angle: -30
                        }
                    },
                    // Pad the y axis just a little so bars can get close to, but
                    // not touch, the grid boundaries.  1.2 is the default padding.
                    yaxis: {
                        label: 'Distance Travelled',
                        pad: 1.05,
                        labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                        tickOptions: {
                          labelPosition:'middle'
                        },
                        min:min_val,
                        max:max_val     
                    }
                }
            });
        plot2.legend.labels = data.device;
        plot2.replot( { resetAxes: false } );

このチャートを複数のアイテムのチャートに変換しているため、0の値も削除するにはどうすればよいですか。これは現在、1つのアイテムのチャートです..だから0ラベルも削除する方法...

4

1 に答える 1

3

これらの例に基づいて: point-labels.jqplot-point-label 、 CSS でクラスを使用してポイント ラベルの表示を変更できます。transformしたがって、CSSプロパティを使用して、次の説明に従ってテキストを回転できます: how-to-draw-vertical-text-with-css-cross-browser

値 0 のラベルを削除するには、ゼロを空の文字列に変更した一連のラベルを提供する必要があります。このカスタム セットは次のように使用できます。

pointLabels: {
    show: true,
    labels: customSetOfLabels
},

これは動作するデモです -ただし、jqPlot が jsfiddle からのリクエストをブロックしているように見えるため、スクリプトがロードされないことがあります。ローカルで試すか、1 つのブラウザー ウィンドウでjqPlot デモ ページと jsfiddle にアクセスして、スクリプトがキャッシュから読み込まれるようにすることができます。

JavaScript 配列map()関数を使用して、次のようなラベルのカスタム セットを作成しました。

function removeZeros(x){
    return x===0 ? '' : x;
}
var line1 = [14, 32, 41, 44, 0, 40];
var line1Labels = line1.map(removeZeros);

すべてのブラウザーで機能するとmap()は限らないため、代わりに for ループを使用して配列を反復処理することをお勧めします。

于 2012-12-18T14:08:19.423 に答える