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轴上更清晰可见，因为我在同一范围内有许多输入。

我也尝试在CSS中的Jquery中设置$("#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，高度为1800px： https://codepen.io/anon/pen/mQrQOr

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

1 个答案: