如何解决dc.js Vue渲染图表不正确
我尝试在Vue组件中使用dc.js。为什么我的线图有黑色填充区域,为什么笔刷看起来与普通的笔刷工具如此不同。我从普通的Javascript项目复制了此代码。
<template>
<div>
<div id="lineChart"></div>
</div>
</template>
<script>
import crossfilter from "crossfilter2";
import * as d3 from "d3";
import * as dc from "dc";
const axios = require("axios").default;
export default {
data() {
return {
signalData: null,};
},mounted() {
this.fetchData();
},methods: {
generateChart(data) {
var linechart = new dc.LineChart("#lineChart");
var dataModel = Object.keys(data).map(function (d) {
return {
key: +d,value: data[d],};
});
var cf = crossfilter(dataModel);
var dimension = cf.dimension(dc.pluck("key"));
var group = dimension.group().reduceSum(function (d) {
return d.value;
});
linechart
.width(null)
.height(330)
.x(d3.scaleLinear().domain([0,Object.keys(data).length]))
.brushOn(true)
.dimension(dimension)
.group(group)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.elasticY(true)
.renderArea(false);
dc.renderAll();
},fetchData() {
axios
.get("http://localhost:3000")
.then((res) => {
this.generateChart(res.data);
})
.catch((err) => {
console.log(err);
});
},},};
</script>
<style>
</style>
这可能是一种版本问题吗?我该如何解决?
解决方法
如注释所示,答案是将dc.css文件包含到vue项目中。
将此行代码写入 main.js
require("../node_modules/dc/dist/style/dc.css")
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。