DevExtreme 차트에서 같은 라인의 혼합 라인 스타일

안녕하세요 저는 DevExtreme Framework의 차트로 처음으로 작업하고 있습니다. 웹 응용 프로그램에 대한 좋은 차트 플러그인을 찾고 있기 때문에 일부는이를 해결할 수 있습니다. 내 특별한 요구 사항들. 그 순간에 내 차트는 다음과 같이 보입니다 (필자는 오류가 발생하여 globalized/chartjs.js를위한 외부 라이브러리를 만들었 기 때문에이 문제를 해결할 수 없기 때문에 바이올린이나 stackoverflow 스 니펫에 넣을 수는 없습니다) :DevExtreme 차트에서 같은 라인의 혼합 라인 스타일

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

내 결과 :

,369 이제

내가이 예에서 파란색 선 같은 레드 라인을 변경하려면 (이 차트는 하지 devextreme, 그것은이다 highcharts) :

내 목표는 라인 스타일을 혼합한다 특정 구역의 같은 줄에 (나는 말하기를,이 부분은 견고하고 점선으로되어있다). 가장 복잡한 차트로 어떻게이 작업을 수행 할 수 있습니까? 이것이 가능한가?

몇 가지 도움을 주시면 감사하겠습니다.

건배.

출처

2016-06-23 MrBuggy

devextreme을 사용하여이 모든 작업을 수행 할 수 있습니까? 나는 몇 시간이 지나서 그것을 시도하고 있고 해결책을 찾지 못했습니다 .. – MrBuggy

현재 차트에는 혼합 선 스타일로 하나의 시리즈를 표시 할 수있는 기능이 없습니다.

그러나 한 줄에 두 개의 시리즈를 만드는 방법이 있습니다. 첫 번째 시리즈는 선의 단색 스타일 부분을 표시하고 두 번째 시리즈는 점 스타일 부분을 표시하는 데 사용할 수 있습니다. 이러한 접근 방식의 예가 다음과 같습니다.

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

출처

2016-06-24 08:31:55

안녕과 당신의 대답에 감사드립니다. 바이올린을 만들 수 있습니까? 결과를 볼 수 있습니까? 건배. – MrBuggy

필자는이 도구를 내 검색 솔루션과 똑같이 보였습니다. 아직 좋은 해결 방법입니다. devextreme 개발자가 곧 같은 줄에 여러 줄 스타일을 만들 수있는 기능을 구현하기를 바랍니다. 감사합니다. – MrBuggy

DevExtreme 차트에서 같은 라인의 혼합 라인 스타일

답변

관련 문제