Как удалить или покрасить линию/сетку в области полярной диаграммы, используя Chart.js?

В настоящее время я нахожусь в берлинском запуске, чтобы запустить наш сайт, и я обойдусь с HTML и CSS, но большим нобом, когда дело доходит до JQuery. В любом случае я столкнулся с Chart.js и хотел бы визуализировать успех нашей компании с помощью диаграммы полярных областей. Тем не менее, я хочу удалить легенду и серая сетка/линии в фоновом режиме.Как удалить или покрасить линию/сетку в области полярной диаграммы, используя 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{ 
 
\t width: 600px; 
 
\t height: 600px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="testo.css"/> 
 
\t <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 назвать мой второй родился после того, как вы :)

Любовь из Берлина,

источник

2016-10-30 Killedbygluten

Вы можете просто переключить отображение 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{ 
 
\t width: 600px; 
 
\t height: 600px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="testo.css"/> 
 
\t <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>

источник

2016-10-30 22:16:38

Привет, Лукас, большое вам спасибо! Это сработало .. Вы настоящий js ninja x Еще раз спасибо! – Killedbygluten

@ Killedbygluten рад помочь. –

Может быть, вы просто забыли "

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{ 
 
\t width: 600px; 
 
\t height: 600px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="testo.css"/> 
 
\t <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>

источник

2016-10-30 22:16:03 FireBlast

Приветствия Огонь, ваш код на самом деле recentred график, который является еще одним вопросом, я имел и был готов жить с .. хе-хе. Однако фактические серые решетки в фоновом режиме все еще присутствуют. Спасибо в любом случае, хотя x – Killedbygluten

Как удалить или покрасить линию/сетку в области полярной диаграммы, используя Chart.js?

ответ

Смежные вопросы