首页 文章

如何使用Chart.js删除极 Map 表区域中的线条/网格？

提问于
浏览 次
0

我目前正在柏林开始匆匆忙忙地让我们的网站启动并运行，我得到了HTML和CSS，但是当它归结为Jquery时是一个很大的菜鸟 . 无论如何，我遇到了Chart.js，并希望通过极 Map 表来展示我们公司的成功 . 但我想删除背景中的图例和灰色网格/线条 .

const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{ 
type:'polarArea',
data:{
    labels: ["Car", "Plane", "Train", "Cycle", "Walk", Ship", "Spaceship"],
     datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Car",
        "Ship",
        "Plane",
        "Spaceship",
        "Cycle"
    ]
}
});

body,html {
  margin: 0;
}
.chart{
	width: 600px;
	height: 600px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
	<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>

我不知道如何让选项摆脱背景网格/数字 . 有谁知道在后台删除网格的命令？

非常感谢你的帮助和probs命名我的第二个出生在你之后:)

来自柏林的爱，

一个

javascript jquery charts chart.js

2 回答

  • 2

    您可以简单地切换 legend 的显示以及 scale ，在Graph.js上您可以传递一个options元素 .

    options: {
  legend: {
    display: false
  },
  scale: {
    display: false
  }
}

    查看下面的更新代码段：

    const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{ 
type:'polarArea',
data:{
    labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
     datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Car",
        "Ship",
        "Plane",
        "Spaceship",
        "Cycle"
    ]
},
options: {
  legend: {
    display: false
  },
  scale: {
    display: false
  }
}
    
});

    body,html {
  margin: 0;
}
.chart{
	width: 600px;
	height: 600px;
}

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
	<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
    回复于
  • 1

    也许你只是忘记了“

    const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{ 
type:'polarArea',
data:{
    labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
     datasets: [{
        data: [
            11,
            16,
            7,
            3,
            14
        ],
        backgroundColor: [
            "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Car",
        "Ship",
        "Plane",
        "Spaceship",
        "Cycle"
    ]
}
});

    body,html {
  margin: 0;
}
.chart{
	width: 600px;
	height: 600px;
}

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
	<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
    回复于

相关问题