在DevExtreme图表中同一行的混合线型 [英] Mixed line-style of same line in DevExtreme chart
问题描述
您好，我第一次使用DevExtreme框架的图表，因为我为我的网络应用程序寻找一个好的图表插件，这可以解决我的一些特殊要求。目前我的图表看起来像这样（我不能把它放在一个小提琴或stackoverflow片段，因为我有一个错误，当一个外部库全球化/ chartjs.js所以我复制到问题） ：
HTML：
<！DOCTYPE html&
< html>
< head>
< meta charset =utf-8/>
< title> DevExtreme Chart< / title>
<！ - FRAMEWOKR - >
< script type =text / javascriptsrc =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 / javascriptsrc =table.js>< / script>
< / head>
< body>
< div id =chartContainerstyle =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，
tempatur ：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：参数，
轴：pulsAxe
}，
tooltip：{
enabled：true
}，
系列：
name：Puls，
valueField：puls，
}，
{
name：Temperatur，
valueField： ，
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图表这样做？这可能吗？
我会非常感谢您的帮助。
干杯。
p>但是，有一种方法可以为一行创建两个系列。第一个系列可用于显示线条的实心部分，第二个系列用于点样式部分。这是一个这样的方法的例子：
$（＃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}，
系列：[{
color：＃334455，
valueField：val1，
point：{visible：false}
}，{
color：＃334455，
valueField：val2，
point：{visible：false}，
dashStyle：dot，
hoverStyle：{
dashStyle：dot
}
}]
}）;
Hi I'm working for the first time with the charts of the DevExtreme Framework, because I'm searching for a good chart plugin for my web-application, which can solve some of my special requirements. At the moment my chart looks like this (I can't put it in a fiddle or in the stackoverflow snippet, because there I got an error, when a put an external library for globalize/chartjs.js so I copied into the question):
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"
}
}
}
]
});
});
My result:
Now I would like to change the red line like the blue line in this example (this chart is not devextreme, it's highcharts):
My goal is, also to mix line-style in the same line on a specific zone (I would like to say, this part is solid, and this is dotted). How can I do this with devextreme charts? Is this possible?
I would be thankfull for some help.
Cheers.
At the moment the chart doesn't have the capability to display one series with the mix-line style.
There is, however, a way to create two series for one line. The first series can be used to show the solid-style part of the line and the second series for the dot-style part. Here is an example of such an approach:
$("#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图表中同一行的混合线型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
