2017-07-03 2 views
1

Mithrilを使用するアプリケーションにChartkickを追加しようとしています。JSをMithrilに変換する(Chartkickを使用)

ミスリルと一緒に使用するには、以下のコードをどのように変換しますか?

<h1>Line Chart</h1> 
<div id="line" style="height: 300px;"></div> 
<script> 
    new Chartkick.LineChart("chart-1", "/stocks") 
</script> 

ミスリルのページ:あなたがoncreate vnode lifecycle hook使用することをお勧めします

import m from 'mithril'; 
import _ from 'underscore'; 
import h from '../h'; 
import projectShareBox from './project-share-box'; 
import facebookButton from './facebook-button'; 
import addressTag from './address-tag'; 
import categoryTag from './category-tag'; 

const projectHighlight = { 
    controller() { 
     return { 
      displayShareBox: h.toggleProp(false, true) 
     }; 
    }, 
    view(ctrl, args) { 
     const project = args.project; 

     return m('#project-highlight', [ 
      m('.w-row.u-marginbottom-60', [ 
       m('.w-col.w-col-12.u-text-center', { 
        style: { 
         'min-height': '300px' 
        } 
       } 
      ]), 

答えて

1
+0

おかげTivac:そのコードの

m.mount(document.body, { view() { return m(".chart", { oncreate(vnode) { vnode.state.chart = new Chartkick.LineChart( vnode.dom, { one : 1, two : 2, three : 3 } ); } }); } }); 

の作業例:

はここでの例です!リンクは "502 Bad Gateway"エラーのために動作していないようですので、後で見てみます。 –

+0

は、両方のスクリプトをアプリケーションテンプレートとMinthrillに含めることで試しましたが、.chart divは空白です。なぜこれが起こっているのかについて何か提案がありますか? –

+1

ミスリルジッタールームに尋ねると誰かが助けることができるはずです! – Tivac

関連する問題