jqplot - jqplot：xaxisティックテキストを単語に分割します

Question

グラフの軸に使用するラベルには、複数の単語を含むテキストが含まれています。このような：

そしてそれは悪く見えます。テキストを複数行でレンダリングするために、（グラフでわかるように）ウィットスペースをbrsまたは\nに置き換えてみました。結果は私が期待したものではありません。

ダニのテキストを単語に分割し、各単語を1行に描画するにはどうすればよいですか？

Answer 1

は<br/>、テキストを2行に分割しようとしています。ここで実際の例を参照してください。

それを機能させるために、いくつかのjqplotプラグインをロードすることを忘れないでください：CanvasAxisTickRenderer、CategoryAxisRenderer。次に、シリーズに申し込む必要があります tickRenderer: $.jqplot.CanvasAxisTickRenderer。あなたはあなたのyaxisに適用するためにweelとして必要ですrenderer: $.jqplot.CategoryAxisRenderer。

Answer 2

私にとって、<br/>は機能せず、\nは機能しました。

私の構成：

jQuery.jqplot(element, configuration.series, {
        stackSeries: true,
        animate: false,
        captureRightClick: false,
        seriesColors: ['green', 'blue', 'yellow', 'orange', 'red'],
        seriesDefaults: {
            renderer: jQuery.jqplot.BarRenderer,
            rendererOptions: {
                shadowOffset: 0,
                barDirection: 'horizontal',
                highlightMouseDown: false,
                barWidth: 20,
            },
            pointLabels: {
                show: false
            }
        },
        axesDefaults: {
            min: 0,
            minorTicks: 0,
            tickOptions: {
                formatString: '%d'
            }
        },
        highlighter: {
            show: false
        },
        axes: {
            yaxis: {
                renderer: jQuery.jqplot.CategoryAxisRenderer,
                ticks: configuration.labels
            },
            xaxis: {
                ticks: configuration.ticks,
                label:'Hours',
                labelOptions:{
                    fontFamily:'Helvetica',
                    fontSize: '10pt'
                },
            }
        }
    });