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

时间:2016-10-30 22:02:35

标签: javascript jquery charts chart.js

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

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命名我的第二个出生在你之后:)

来自柏林的爱,

A

2 个答案:

答案 0 :(得分:2)

您可以简单地切换 public void CheckForWinner(int x) { if (button1.Text == "X" && button5.Text == "X" && button9.Text == "X") { x = 1; } else if (button3.Text == "X" && button5.Text == "X" && button7.Text == "X") { x = 1; } else if (button1.Text == "X" && button4.Text == "X" && button7.Text == "X") { x = 1; } else if (button2.Text == "X" && button5.Text == "X" && button8.Text == "X") { x = 1; } else if (button3.Text == "X" && button6.Text == "X" && button9.Text == "X") { x = 1; } else if (button1.Text == "X" && button2.Text == "X" && button3.Text == "X") { x = 1; } else if (button4.Text == "X" && button5.Text == "X" && button6.Text == "X") { x = 1; } else if (button7.Text == "X" && button8.Text == "X" && button9.Text == "X") { x = 1; } if (button1.Text == "O" && button5.Text == "O" && button9.Text == "O") { x = 2; } else if (button3.Text == "O" && button5.Text == "O" && button7.Text == "O") { x = 2; } else if (button1.Text == "O" && button4.Text == "O" && button7.Text == "O") { x = 2; } else if (button2.Text == "O" && button5.Text == "O" && button8.Text == "O") { x = 2; } else if (button3.Text == "O" && button6.Text == "O" && button9.Text == "O") { x = 2; } else if (button1.Text == "O" && button2.Text == "O" && button3.Text == "O") { x = 2; } else if (button4.Text == "O" && button5.Text == "O" && button6.Text == "O") { x = 2; } else if (button7.Text == "O" && button8.Text == "O" && button9.Text == "O") { x = 2; } } 以及legend的显示,在Graph.js上您可以传递选项元素。

scale

检查以下更新的代码段:

&#13;
&#13;
options: {
  legend: {
    display: false
  },
  scale: {
    display: false
  }
}
&#13;
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
  }
}
    
});
&#13;
body,html {
  margin: 0;
}
.chart{
	width: 600px;
	height: 600px;
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

也许你只是忘了&#34;

&#13;
&#13;
new
&#13;
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"
    ]
}
});
&#13;
body,html {
  margin: 0;
}
.chart{
	width: 600px;
	height: 600px;
}
&#13;
&#13;
&#13;