Question

我试图使用“jqPlot”或<br>将\n图表的长标签/刻度分成多行，但都是徒劳的。任何人都可以建议问题是什么？

哪种方法可以将标签分解为多行？

  <script language="javascript" type="text/javascript" src="jqPlot/jquery.jqplot.min.js"></script>
  <script language="javascript" type="text/javascript" src="jqPlot/jqplot.barRenderer.min.js"></script>
  <script language="javascript" type="text/javascript" src="jqPlot/jqplot.highlighter.min.js"></script>
  <script language="javascript" type="text/javascript" src="jqPlot/jqplot.cursor.min.js"></script>
  <script language="javascript" type="text/javascript" src="jqPlot/jqplot.categoryAxisRenderer.min.js"></script>
  <script language="javascript" type="text/javascript" src="jqPlot/jqplot.canvasAxisTickRenderer.min.js"></script>
  <script language="javascript" type="text/javascript" src="jqPlot/jqplot.canvasTextRenderer.min.js"></script>
  <script language="javascript" type="text/javascript" src="jqPlot/jqplot.pointLabels.min.js"></script>
  <script id="example_1" type="text/javascript">    
     $(document).ready(function () {
         var line1 = [5600, 3150, 18];
         var ticks = ['Hardware <br /> and <br /> Installtion', 'Labor', 'Electricity'];    

         plot1 = $.jqplot('chart1', [line1], {
            title: 'Breakout total Cost of Ownership : LFD vs existing solution',
            animate: true,
            seriesColors: ['#1F497D', '#C0504D', '#9BBB59'],

            seriesDefaults: {
                renderer: $.jqplot.BarRenderer,
                rendererOptions: {
                    waterfall: true,
                    barWidth: 50,
                    animation:
                    {
                        speed: 2500
                    },
                    useNegativeColors: false,
                    varyBarColor: true
                },
                pointLabels: {
                    hideZeros: false
                },
                yaxis: 'yaxis',
                xaxis: 'x2axis',
                pointLabels: { show: true }
            },
            axes: {
                x2axis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks:ticks,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,

                    tickOptions: {
                        fontFamily: 'Georgia',
                        fontSize: '8pt',
                        showGridline: true
                    }
                },
                yaxis: {
                    min: 0,
                    tickInterval: 20000,
                    tickOptions: {
                        formatString: "$%'d"
                    }
                }
            },
            cursor: {
                show: true
            }
        });
    });
 </script>

提前致谢

Answer 1

删除以下线后，它工作正常。感谢

<script language="javascript" type="text/javascript" src="jqPlot/jqplot.canvasAxisTickRenderer.min.js"></script>

Jqplot多行刻度/标签

1 个答案: