Горизонтальная гистограмма ZingCharts обрезает метки оси X

Я создал простую горизонтальную гистограмму. Метки на оси X обрезаются, как показано в фрагменте ниже. Мне нужно показать полный ярлык "X Axis Row A". Я пытался изменить ширину графика, но это не помогает.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingChart</title>
</head>
<body>
<div id="chartDiv"></div>
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<script>
var chartData={
    "type":"hbar",
    "stacked":true,
    "stack-type":"normal", // Also accepts "100%"
    "title":{
        "text":"X-Axis Row Label Cut Off Example"
    },
    "scale-x":{
        "values":["X Axis Row B","X Axis Row A"],
    },
    "scale-y":{
        "format":"%v%",
    },
    "series":[{
        "background-color":"rgb(248,51,45)",
        "text":"Negative",
        "values":[-11,-22]
    },{
        "background-color":"rgb(120,152,55)",
        "text":"Positive",
        "values":[35,45]
    }]
};
window.onload=function(){
    var x = zingchart.render({
        id:'chartDiv',
        height:200,
        width:600,
        data:chartData
    });
}
</script>

</body>
</html>

Источник

2 ответа

Решение

Вот и я наконец понял это. Если вы используете клавишу "plotarea", вы можете указать поля. Например:

"plotarea":{
    "margin":"40px 20px 50px 100px"
}

Обновленный пример ниже:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingChart</title>
</head>
<body>
<div id="chartDiv"></div>
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<script>
var chartData={
    "type":"hbar",
    "stacked":true,
    "stack-type":"normal", // Also accepts "100%"
    "title":{
        "text":"Add Margin Example"
    },
    "plotarea": {
        "margin":"40px 20px 50px 100px"
    },
    "scale-x":{
        "values":["X Axis Row B","X Axis Row A"],
    },
    "scale-y":{
        "format":"%v%",
    },
    "series":[{
        "background-color":"rgb(248,51,45)",
        "text":"Negative",
        "values":[-11,-22]
    },{
        "background-color":"rgb(120,152,55)",
        "text":"Positive",
        "values":[35,45]
    }]
};
window.onload=function(){
    var x = zingchart.render({
        id:'chartDiv',
        height:200,
        width:600,
        data:chartData
    });
}
</script>

</body>
</html>

Источник

Установка полей определенно работает. Вы также можете использовать "margin":"dynamic" в объекте "plotarea". В документации есть демонстрация, которая показывает несколько длинных меток, размещенных этим атрибутом. http://www.zingchart.com/docs/json-attributes-syntax/graph-objects/plotarea/

Я работаю в команде ZingChart, поэтому не стесняйтесь обращаться, если у вас есть дополнительные вопросы по этому вопросу.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingChart</title>
</head>
<body>
<div id="chartDiv"></div>
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<script>
var chartData={
    "type":"hbar",
    "stacked":true,
    "stack-type":"normal", // Also accepts "100%"
    "title":{
        "text":"Add Margin Example",
        "adjust-layout":1
    },
    "plotarea": {
        "margin":"dynamic"
    },
    "scale-x":{
        "values":["X Axis Row B","X Axis Row A"],
    },
    "scale-y":{
        "format":"%v%",
    },
    "series":[{
        "background-color":"rgb(248,51,45)",
        "text":"Negative",
        "values":[-11,-22]
    },{
        "background-color":"rgb(120,152,55)",
        "text":"Positive",
        "values":[35,45]
    }]
};
window.onload=function(){
    var x = zingchart.render({
        id:'chartDiv',
        height:200,
        width:600,
        data:chartData
    });
}
</script>

</body>
</html>

Источник
Другие вопросы по тегам