Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-schart with all npm packages installed. Try it out:

var vueSchart = require("vue-schart")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-schart v2.0.0

Vue.js wrapper for sChart.js

vue-schart

:bar_chart: Vue.js wrapper for sChart.js

Downloads Version License

Support for use at the mobile. Support vue.js 1.x & 2.x

Usage

Install:

npm install vue-schart -S

Use in component:

<template>
    <div id="app">
        <schart class="wrapper" canvasId="canvas" :options="options" />
    </div>
</template>
<script>
    import Schart from 'vue-schart';
    export default {
        data() {
            return {
                options: {
                    type: "bar",
                    title: {
                        text: "最近一周各品类销售图"
                    },
                    bgColor: "#fbfbfb",
                    labels: ["周一", "周二", "周三", "周四", "周五"],
                    datasets: [
                        {
                            label: "家电",
                            fillColor: "rgba(241, 49, 74, 0.5)",
                            data: [234, 278, 270, 190, 230]
                        },
                        {
                            label: "百货",
                            data: [164, 178, 190, 135, 160]
                        },
                        {
                            label: "食品",
                            data: [144, 198, 150, 235, 120]
                        }
                    ]
                }
            }
        },
        components:{
            Schart
        }
    }
</script>

<style>
.wrapper{
    width: 7rem;
    height: 5rem;
}
</style>

Options

Refer to the documentation for sChart.js.

License

MIT license.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free