DevExtreme图表中同一行的样式

2018-05-30 19:29:57

您好，我第一次使用DevExtreme Framework的图表工作，因为我正在为我的web应用程序寻找一个好的图表插件，它可以解决我的一些特殊需求。目前我的图表看起来像这样（我不能把它放在小提琴或者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图表来做到这一点？这可能吗？

我会感谢一些帮助。

干杯。

目前该图表无法显示混合线样式的一个系列。

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

$("#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"
        }
    }]
});

链接地址: http://www.djcxy.com/p/5237.html

上一篇: style of same line in DevExtreme chart

下一篇: Devextreme JS DXGrid how to call cellTemplate in code behind