0

JQPlot の棒グラフにデータを正しく表示する方法を教えてください。グラフのデータは x 軸で正しくありません。この投稿の一番下にある私の画像を参照してください。

これが私のコードです：

    var RepeatVisitRatesGraph = $.jqplot('CustomerRepeatVisitRatesGraph', [[10, 20, 30, 45], [23, 14, 34, 8], [32, 12, 45, 76]], {
    // The "seriesDefaults" option is an options object that will
    // be applied to all series in the chart.
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: 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.
    series:[
        {label:'Hotel'},
        {label:'Event Regristration'},
        {label:'Airfare'}
    ],
    // 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,
            ticks: ['May', 'June', 'July', 'August']
        },
        // 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: {
            pad: 1.05,
            tickOptions: {formatString: '$%d'}
        }
    }
});

そして、これは現在表示されている方法です：

ここに画像の説明を入力

4

1 に答える 1

0

これを参照してください。問題なく動作するようになりました。問題は、スクリプト ファイルが含まれていないことが原因だと思います。

http://jsfiddle.net/JWhmQ/1371/

HTML

<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>

<div id="CustomerRepeatVisitRatesGraph"></div>

棒グラフコード

var RepeatVisitRatesGraph = $.jqplot('CustomerRepeatVisitRatesGraph', [[10, 20, 30, 45], [23, 14, 34, 8], [32, 12, 45, 76]], {
    // The "seriesDefaults" option is an options object that will
    // be applied to all series in the chart.
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: 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.
    series:[
        {label:'Hotel'},
        {label:'Event Regristration'},
        {label:'Airfare'}
    ],
    // 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,
            ticks: ['May', 'June', 'July', 'August']
        },
        // 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: {
            pad: 1.05,
            tickOptions: {formatString: '$%d'}
        }
    }
});
于 2013-01-17T03:05:12.183 に答える