Question

我正在尝试将Chartkick添加到使用Mithril的应用程序中。

如何将以下代码转换为与秘银一起使用？

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

秘银页面：

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'
                    }
                }
            ]),

Answer 1

您需要使用oncreate vnode lifecycle hook。

以下是一个例子：

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

该代码的工作示例：https://jsbin.com/gogucuv/2/edit?html,js,output

将JS转换为Mithril（使用Chartkick）

1 个答案: