长长度字符串未在图表中正确显示

时间:2015-10-12 08:10:34

标签: javascript php charts highcharts

在函数For Each valSelect In Me!Combo29.ItemsSelected strValue = Me!Combo29.ItemData(valSelect) Set rs = CurrentDb.OpenRecordset(strValue) Debug.Print strValue, rs.RecordCount Next rs.Close Set rs = Nothing 。图表下的javascript代码中,我已将json代码指定为highcharts。字符串xAxis: { categories:["jasrajsinghbediisthebest"]}由于其较长的长度而未在图表中正确显示。我想图表应该显示长字符串。我不想改变div的大小,它应该保持在400px。

js code:

jasrajsinghbediisthebest

html代码:

$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
    xAxis: {
    //  xAxis data format :["x","y","z"]
        categories:["jasrajsinghbediisthebest"]
    },
    chart: {
        renderTo: 'container',
        type: 'column',
        margin: 75,
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Chart rotation demo'
    },
    subtitle: {
        text: 'Test options by dragging the sliders below'
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});
function showValues() {
    $('#R0-value').html(chart.options.chart.options3d.alpha);
    $('#R1-value').html(chart.options.chart.options3d.beta);
}

// Activate the sliders
$('#R0').on('change', function () {
    chart.options.chart.options3d.alpha = this.value;
    showValues();
    chart.redraw(false);
});
$('#R1').on('change', function () {
    chart.options.chart.options3d.beta = this.value;
    showValues();
    chart.redraw(false);
});

showValues();
});

css代码:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
<div id="sliders">
    <table>
        <tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0"        max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
        <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
    </table>
</div>

2 个答案:

答案 0 :(得分:0)

在标签中使用overflow none:

labels: { 
align: 'left',  
style: { 
    textOverflow:'none', 
    whiteSpace: 'nowrap' 
  } 
 }

答案 1 :(得分:0)

您需要设置label的宽度,然后将useHTML设置为true。最后一步是应用CSS样式。

xAxis: {
        //  xAxis data format :["x","y","z"]
        categories: ["jasrajsinghbediisthebest"],
        labels: {
            useHTML:true,
            style: {
            }
        }
    },

CSS

.highcharts-xaxis-labels span {
    word-break:break-all!important;
    white-space: normal!important;
}

示例:http://jsfiddle.net/ta2pLb3v/1/