ямочка: изменение цвета на двухосном линейном графике - PullRequest
0 голосов
/ 03 декабря 2018

Это то, как далеко я проделал создание многоосевых линейных графиков с ямочками.Непонятно, почему серия y3 видна при сравнении ее диапазона с диапазоном y1 и y2.Все еще экспериментирую ... не ставя под сомнение мудрость многоосевых линейных графиков на этом этапе.

Мой вопрос заключается в том, как выбрать конкретные цвета для трех серий (например, blue, red, green) и добавьте соответствующую легенду, учитывая, что три addSeries вызова связаны с group.

Tried JSFiddle, but the rendering there is very different

Пробовал JSFiddle, но рендерингтам очень разные.

<div id="plotSO">
<script type="text/javascript">

    var svg = dimple.newSvg("#plotSO",900, 500),
      chart=null,
      s1=null,
      s2=null,
      s3=null,
      x=null,
      y1=null,
      y2=null,
      y3=null;

    chart = new dimple.chart(svg);
    chart.setBounds(100, 100, 510, 305);
    x = chart.addMeasureAxis("x", "group");
    x.showGridlines = true;
    x.overrideMin = 1;
    y1 = chart.addMeasureAxis("y", "value");
    y2 = chart.addMeasureAxis("y", "value");
    y3 = chart.addMeasureAxis("y", "value");

    s1 = chart.addSeries( "group", dimple.plot.line,[x,y1]);
    s1.interpolation = "cardinal";
    s1.lineMarkers=true;
    s1.data=[{"group":1,"metric":"m1","value":112.5002},{"group":2,"metric":"m1","value":166.2608},{"group":3,"metric":"m1","value":164.3132}] ;
    y1.title="y1-title";

    s2 = chart.addSeries( "group", dimple.plot.line,[x,y2]);
    s2.interpolation = "cardinal";
    s2.lineMarkers=true;
    s2.data=[{"group":1,"metric":"m2","value":155.4},{"group":2,"metric":"m2","value":162.4},{"group":3,"metric":"m2","value":152.9}] ;
    y2.title="y2-title";

    s3 = chart.addSeries( "group", dimple.plot.line,[x,y3]);
    s3.interpolation = "cardinal";
    s3.lineMarkers=true;
    s3.data=[{"group":1,"metric":"m3","value":0.0451},{"group":2,"metric":"m3","value":0.0275},{"group":3,"metric":"m3","value":0.0226}] ;
    y3.title="y3-title";

    chart.draw();
</script>
</div>
...