読者です 読者をやめる 読者になる 読者になる

SIMILE Timeplotで点と線の折れ線グラフを作成する

javascript

SIMILE Timeplotで時間軸のグラフを作成する11つのステップ
で作成したものは、折れ線グラフ。
カーソルを合わせれば、日付と値は分かるが、それぞれの値を点としては表示していない。
点と線の折れ線グラフにする。

2010年の株価を例に表示する。

線だけ

昨日のTutorial9.htmlをベースに作成すると以下のようになる。

ソース(抜粋)
      var plotInfo = [
        Timeplot.createPlotInfo({
          id: "plot1",
          dataSource: new Timeplot.ColumnSource(eventSource,1),
          valueGeometry: new Timeplot.DefaultValueGeometry({
            gridColor: "#000000",
            axisLabelsPlacement: "left",
            max: 100
          }),
          timeGeometry: new Timeplot.DefaultTimeGeometry({
            gridColor: "#000000",
            axisLabelsPlacement: "top"
          }),
          lineColor: darkblue,
          showValues: true
        })
      ];

点と線あり

「dotColor: darkblue」を設定することで「点」を表示することができる。

ソース(抜粋)
      var plotInfo = [
        Timeplot.createPlotInfo({
          id: "plot1",
          dataSource: new Timeplot.ColumnSource(eventSource,1),
          valueGeometry: new Timeplot.DefaultValueGeometry({
            gridColor: "#000000",
            axisLabelsPlacement: "left",
            max: 100
          }),
          timeGeometry: new Timeplot.DefaultTimeGeometry({
            gridColor: "#000000",
            axisLabelsPlacement: "top"
          }),
          lineColor: darkblue,
          dotColor: darkblue,  これを追加
          showValues: true
        })
      ];

気になるモノ






ベッドやソファに簡単に差し込むだけで収納ラックになる新しい発想のラックが登場!座ったまま、寝たまま、リモコンがすぐ見つかる!

あなろ(インテリア雑貨)

¥ 980 (税込、送料別)

価格は記載時点のものです。購入前にご確認ください。






広告を非表示にする