Question

您好我第一次使用DevExtreme Framework的图表，因为我正在为我的网络应用程序搜索一个好的图表插件，这可以解决我的一些特殊要求。目前我的图表看起来像这样（我不能把它放在一个小提琴或stackoverflow片段中，因为我有一个错误，当一个外部库为globalize / chartjs.js放入所以我复制到问题中）：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>DevExtreme Chart</title>
        <!--FRAMEWOKR-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
        <script src="./lib/globalize.min.js"></script>
        <script src="./lib/dx.charts.js"></script>
        <!--JS-->
        <script type="text/javascript" src="chart.js"></script>
    </head>
    <body>
        <div id="chartContainer" style="width:100%; height: 600px"></div>
    </body>
</html>

JS：

$(document).ready(function(){
    var dataSource = [
        {
            argument: '15.06.2016',
            puls: 102,
            temperatur: 37.6,
            weight: 89
        },
        {
            argument: '16.06.2016',
            puls: 99,
            temperatur: 35.1,
            weight: 88
        },
        {
            argument: '17.06.2016',
            puls: 87,
            temperatur: 38.0,
            weight: 87
        },
        {
            argument: '18.06.2016',
            puls: 91,
            temperatur: 36.3,
            weight: 88
        },
        {
            argument: '19.06.2016',
            puls: 112,
            temperatur: 37.1,
            weight: 90
        }
    ];

    $("#chartContainer").dxChart({
        dataSource: dataSource,
        commonSeriesSettings: {
            type: "spline",
            label: {
                visible: false,
                connector: {
                    visible: false
                }
            },
            argumentField: "argument",
            axis: "pulsAxe"
        },
        tooltip: {
            enabled: true
        },
        series: [
            {
                name: "Puls",
                valueField: "puls",
            },
            {
                name: "Temperatur",
                valueField: "temperatur",
                axis: "temperaturAxe"
            },
            {
                name: "Gewicht",
                valueField: "weight",
                axis: "weightAxe"
            }
        ],
        valueAxis: [
            {
                name: "pulsAxe",
                title: "Puls",
                label: {
                    customizeText: function(value) {
                        return value.value + " bpm"
                    }
                }
            },
            {
                name: "temperaturAxe",
                title: "Temperatur",
                position: "right",
                label: {
                    customizeText: function(value) {
                        return value.value + " °C"
                    }
                }
            },
            {
                name: "weightAxe",
                title: "Gewicht",
                position: "right",
                label: {
                    customizeText: function(value) {
                        return value.value + " kg"
                    }
                }
            }
        ]
    });
});

我的结果：

现在我想在此示例中更改红线，如蓝线（此图表不 devextreme，它是高图）：

我的目标是，在特定区域的同一行中混合使用线条样式（我想说，这部分是实心的，这是点缀的）。如何使用devextreme图表执行此操作？这可能吗？

我会感谢你的帮助。

干杯。

Answer 1

目前图表无法以混合线型显示一个系列。

但是，有一种方法可以为一行创建两个系列。第一个系列可用于显示线条的实心部分和第二个系列的点样式部分。以下是此类方法的示例：

$("#container").dxChart({
    dataSource: [{
        arg: 1,
        val1: 10
    }, {
        arg: 2,
        val1: 15
    }, {
        arg: 3,
        val1: 8
    }, {
        arg: 4,
        val1: 6
    }, {
       arg: 5,
       val1: 12
    }, {
       arg: 5,
       val2: 12
    }, {
       arg: 6,
       val2: 17
    }], 
    legend: { visible: false },
    series: [{
       color: "#334455",
        valueField: "val1",
        point: { visible: false }
    }, {
        color: "#334455",
        valueField: "val2",
        point: { visible: false },
        dashStyle: "dot",
        hoverStyle: {
            dashStyle: "dot"
        }
    }]
});

DevExtreme图表中同一行的混合线型

1 个答案: