javascript - 如何在 Javascript/Jquery 中更改图表的大小

Question

我正在使用 DevExtreme widgets在 JQuery 中创建折线图，如下所示

var dataSource = [{"Date Range": "August-2018",
Benelux: 194,
Czech_Slovakia: 128,
EECA: 23,
France: 406,
GAT: 1212,
Iberia: 213,
Israel: 116,
Italy: 498,
MEA: 159,
Nordics: 356,
Poland: 143,
Russia: 224,
SEE: 183,
Switzerland: 163,
Turkey: 36,
UKI: 259},
{"Date Range": "September-2018",
Benelux: 177,
Czech_Slovakia: 117,
EECA: 26,
France: 511,
GAT: 1277,
Iberia: 254,
Israel: 97,
Italy: 649,
MEA: 153,
Nordics: 322,
Poland: 170,
Russia: 283,
SEE: 217,
Switzerland: 170,
Turkey: 18,
UKI: 247},
{"Date Range": "October-2018",
Benelux: 193,
Czech_Slovakia: 146,
EECA: 45,
France: 568,
GAT: 1280,
Iberia: 282,
Israel: 128,
Italy: 828,
MEA: 164,
Nordics: 387,
Poland: 170,
Russia: 337,
SEE: 200,
Switzerland: 151,
Turkey: 40,
UKI: 249}];

           var chart = $("#chart").dxChart({
        palette: "Soft Blue",
        dataSource: dataSource,
        commonSeriesSettings: {
            argumentField: "Date Range",
            type: "line"
        },
        margin: {
            bottom: 20
        },
        valueAxis: [{
            tickInterval: 100
        }],
        argumentAxis: {
            valueMarginsEnabled: false,
            discreteAxisDivisionMode: "crossLabels",
            grid: {
                visible: true
            }
        },
        series: [
            { valueField: "Benelux", name: "Benelux" },
            { valueField: "Czech_Slovakia", name: "Czech_Slovakia" },
            { valueField: "EECA", name: "EECA" },
            { valueField: "France", name: "France" },
            { valueField: "GAT", name: "GAT" },
            { valueField: "Iberia", name: "Iberia" },
            { valueField: "Israel", name: "Israel" },
            { valueField: "Italy", name: "Italy" },
            { valueField: "MEA", name: "MEA" },
            { valueField: "Nordics", name: "Nordics" },
            { valueField: "Poland", name: "Poland" },
            { valueField: "Russia", name: "Russia" },
            { valueField: "SEE", name: "SEE" },
            { valueField: "Switzerland", name: "Switzerland" },
            { valueField: "Turkey", name: "Turkey" },
            { valueField: "UKI", name: "UKI" }         
        ],
        legend: {
            verticalAlignment: "bottom",
            horizontalAlignment: "center",
            itemTextPosition: "bottom"
        },
        title: { 
            text: "Order Trend Volume",
            subtitle: {
                text: "by Market / Month"
            }
        },
        "export": {
            enabled: true
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function (arg) {
                return {
                    text: arg.valueText
                };
            }
        }
    }).dxChart("instance");

<link href="https://cdn3.devexpress.com/jslib/18.1.7/css/dx.common.css" rel="stylesheet"/>
<link href="https://cdn3.devexpress.com/jslib/18.1.7/css/dx.light.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn3.devexpress.com/jslib/18.2.3/js/dx.all.js"></script>
<div id="chart"></div>

一切正常，只是想让图表更大，更容易在 Y 轴上阅读，因为我在同一范围内有很多输入。

我尝试在 Jquery 中也在 css 中设置 $("#chart").height("1800px"); 但它没有覆盖默认值。

我想我应该使用 tick更改我的 Y 轴比例的选项，在我的例子中是 0,200,400... 例如 0,50,100... 但我不知道如何添加它。当我影响它的值时，我看不到任何变化。

感谢您的帮助。

Answer 1

您要查找的两个选项都记录在您指向的 DevExtreme 源中。

要更改轴间隔大小，您需要 valueAxis 作为对象数组，但它只是一个对象:

valueAxis: { tickInterval: 50}

来源:https://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/valueAxis/tickInterval/

要设置/更改图表大小，有一个类似的 size 对象接受高度和宽度的属性:

size: { height:1800}

https://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/size/

我已经从您的代码中连接了一个示例，但此处所需的轴增量为 50，高度为 1800 像素: https://codepen.io/anon/pen/mQrQOr