javascript - Canvas.js not showing all label - Stack Overflow

admin管理员组

文章数量:1304167

I have a graph like in the picture. But I am having trouble with the labels. I can not show all of the labels. When I hover on it it shows the label, but when I print it it doesn't display.

var chart = new CanvasJS.Chart('chartContainer', 
    { 
        animationEnabled: true, 
        theme: 'theme4',
        title: { text: '' }, 
        axisY: { maximum: 100 , title: 'Faiz'},
        axisX: { labelAngle: -70 },
        exportEnabled: true,
        data: [{ 
            type: 'column',
            indexLabel: '{y}',
            indexLabelPlacement: 'outside',
            indexLabelOrientation: 'horizontal',
            indexLabel: '{y}',
            dataPoints: [
                        { label: 'Azərbaycan dili', y: 51 },
                        { label: 'Ədəbiyyat', y: 71 },
                        { label: 'Cəbr', y: 51 },
                        { label: 'Həndəsə', y: 61 },
                        { label: 'Fizika', y: 60 },
                        { label: 'Kimya', y: 56 },
                        { label: 'Biologiya', y: 49 },
                        { label: 'Tarix', y: 62 },
                        { label: 'Azərbaycan tarixi', y: 70 },
                        { label: 'Coğrafiya', y: 58 },
                        { label: 'Xarici dil', y: 57 },
                        { label: 'İnformatika', y: 62 },
                        { label: 'Rus dili', y: 43 },
                        { label: 'Riyaziyyat', y: 53 }
                    ] 
            }]
   });
chart.render();

I have a graph like in the picture. But I am having trouble with the labels. I can not show all of the labels. When I hover on it it shows the label, but when I print it it doesn't display.

var chart = new CanvasJS.Chart('chartContainer', 
    { 
        animationEnabled: true, 
        theme: 'theme4',
        title: { text: '' }, 
        axisY: { maximum: 100 , title: 'Faiz'},
        axisX: { labelAngle: -70 },
        exportEnabled: true,
        data: [{ 
            type: 'column',
            indexLabel: '{y}',
            indexLabelPlacement: 'outside',
            indexLabelOrientation: 'horizontal',
            indexLabel: '{y}',
            dataPoints: [
                        { label: 'Azərbaycan dili', y: 51 },
                        { label: 'Ədəbiyyat', y: 71 },
                        { label: 'Cəbr', y: 51 },
                        { label: 'Həndəsə', y: 61 },
                        { label: 'Fizika', y: 60 },
                        { label: 'Kimya', y: 56 },
                        { label: 'Biologiya', y: 49 },
                        { label: 'Tarix', y: 62 },
                        { label: 'Azərbaycan tarixi', y: 70 },
                        { label: 'Coğrafiya', y: 58 },
                        { label: 'Xarici dil', y: 57 },
                        { label: 'İnformatika', y: 62 },
                        { label: 'Rus dili', y: 43 },
                        { label: 'Riyaziyyat', y: 53 }
                    ] 
            }]
   });
chart.render();

• javascript
• web
• graphics

Share Improve this question Follow edited Apr 27, 2018 at 4:52 fin444 74722 gold badges1414 silver badges2727 bronze badges asked Nov 12, 2015 at 6:05 maxileftmaxileft 22555 silver badges1515 bronze badges 3

• Did you check canvasjs./docs/charts/chart-options/culture ? – Afsar Commented Nov 12, 2015 at 6:32
• what is that language ? – Afsar Commented Nov 12, 2015 at 6:34
• its language Azerbaijani. the problem is not with the culture. – maxileft Commented Nov 12, 2015 at 18:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Try adding:

culture: "es",

to your object config after title: { text: '' },
Some of the labels hide in order to avoid overlapping due to insufficient width. In your case if you do this:

axisX: {
    interval: 1,
    labelAngle: -70 
}

it should work.

var chart = new CanvasJS.Chart('chartContainer', 
    { 
        animationEnabled: true, 
        theme: 'theme4',
        title: { text: '' }, 
        axisY: { maximum: 100 , title: 'Faiz'},
        axisX:{
            interval: 1,
            labelAngle: -70 
        },
        exportEnabled: true,
        data: [{ 
            type: 'column',
            indexLabel: '{y}',
            indexLabelPlacement: 'outside',
            indexLabelOrientation: 'horizontal',
            indexLabel: '{y}',
            dataPoints: [
                        { label: 'Azərbaycan dili', y: 51 },
                        { label: 'Ədəbiyyat', y: 71 },
                        { label: 'Cəbr', y: 51 },
                        { label: 'Həndəsə', y: 61 },
                        { label: 'Fizika', y: 60 },
                        { label: 'Kimya', y: 56 },
                        { label: 'Biologiya', y: 49 },
                        { label: 'Tarix', y: 62 },
                        { label: 'Azərbaycan tarixi', y: 70 },
                        { label: 'Coğrafiya', y: 58 },
                        { label: 'Xarici dil', y: 57 },
                        { label: 'İnformatika', y: 62 },
                        { label: 'Rus dili', y: 43 },
                        { label: 'Riyaziyyat', y: 53 }
                    ] 
            }]
   });
chart.render();

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}
a:link, a:visited, a:active {
    color: #4F81BC;
}

<script src="https://canvasjs./assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;margin-top:30px;"></div>

This should definitely work. I got the similar issue I could resolve it by adding this :

   axisX: {
    interval: 1,
    labelAngle: -70 
}

本文标签： javascriptCanvasjs not showing all labelStack Overflow