DevExtreme 图表中同一条线的混合线型答案

【问题标题】：Mixed line-style of same line in DevExtreme chartDevExtreme 图表中同一条线的混合线型
【发布时间】：2016-06-23 11:33:25
【问题描述】：

您好，我是第一次使用 DevExtreme 框架的图表，因为我正在为我的 web 应用程序寻找一个好的图表插件，它可以解决我的一些特殊要求。目前我的图表看起来像这样（我不能把它放在小提琴或stackoverflow sn-p中，因为我有一个错误，当我为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，它是highcharts）：

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

如果能得到一些帮助，我将不胜感激。

干杯。

【问题讨论】：

devextreme 有可能吗？几个小时以来我一直在尝试，但没有找到解决方案..

标签： javascript charts devexpress devextreme

【解决方案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 的开发人员能尽快实现在同一个上制作多线样式的功能行..谢谢和欢呼。