Я добавляю линейный график со стилями (Line-styles-chart) в мой проект, и когда я его запускаю, страница не загружается. Я просто получаю изображение загрузочного курсора. В Visual Studio 2019 я получаю следующее предупреждение:
"Found conflicts between versions of "Newtonsoft.Json" that could not be resolved. These references are listed in the build log when log verbosity is set to detailed.
Кто-нибудь знает, почему я это получаю? У меня есть последняя версия newtown.json
Внутри моей посылки пакетов я настроил ее так, как в последней версии Newtonsoft.json.
<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="Microsoft.Azure.WebJobs" version="1.0.1" targetFramework="net452" />
<package id="Microsoft.Azure.WebJobs.Core" version="1.0.1" targetFramework="net452" />
<package id="Microsoft.Data.Edm" version="5.6.0" targetFramework="net452" />
<package id="Microsoft.Data.OData" version="5.6.0" targetFramework="net452" />
<package id="Microsoft.Data.Services.Client" version="5.6.0" targetFramework="net452" />
<package id="Microsoft.Web.WebJobs.Publish" version="2.0.0" targetFramework="net452" />
<package id="Microsoft.WindowsAzure.ConfigurationManager" version="2.0.3" targetFramework="net452" />
<package id="MSBuild.Microsoft.VisualStudio.Web.targets" version="14.0.0.3" targetFramework="net452" />
<package id="Newtonsoft.Json" version="6.0.4" targetFramework="net452" />
<package id="System.Spatial" version="5.6.0" targetFramework="net452" />
<package id="WindowsAzure.Storage" version="4.2.1" targetFramework="net452" />
</packages>
Вот так у меня и есть мой скрипт. JS настроить:
$(function () {
new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
new Chart(document.getElementById("line_styles_Chart").getContext("2d"), getChartJs('line-styles'));
});
function getChartJs(type) {
var config = null;
if (type === 'line') {
config = {
type: 'line',
data: {
labels: ["Groceries", "Rent", "Utilities", "Student Loans", "Car payment"],
datasets: [{
label: "Refund",
data: [65, 59, 80, 45, 56],
borderColor: 'rgba(0, 188, 212, 0.75)',
backgroundColor: 'rgba(0, 188, 212, 0.3)',
pointBorderColor: 'rgba(0, 188, 212, 0)',
pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
pointBorderWidth: 1
}
]
},
options: {
responsive: true,
legend: false
}
}
}
else if (type === 'bar') {
config = {
type: 'bar',
data: {
labels: ["Gas bill", "light bill", "Rent", "Cell phone bill", "Water Bill", "Groceries", "Spotify"],
datasets: [{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: 'rgba(0, 188, 212, 0.8)'
}, {
label: "My Second dataset",
data: [28, 48, 40, 19, 86, 27, 90],
backgroundColor: 'rgba(233, 30, 99, 0.8)'
}]
},
options: {
responsive: true,
legend: false
}
}
}
else if (type === 'line-styles') {
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March'],
datasets: [{
label: 'Gas bill',
fill: false,
backgroundColor: 'rgba(0, 188, 212, 0.8)',
borderColor: 'rgb(54, 162, 235)',
data: [0, 42, 55],
}, {
label: 'Light bill',
fill: false,
backgroundColor: 'rgba(233, 30, 99, 0.8)',
borderColor: 'rgb(75, 192, 192)',
borderDash: [5, 5],
data: [28, 48, 40],
}, {
label: 'Rent',
backgroundColor: 'rgba(255, 209, 0, 0.8)',
borderColor: 'rgb(255, 205, 86)',
data: [40, 27, 90],
fill: true,
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Line Styles Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
}
return config;
}
Вот как я настроил в моем HTML:
<div class="report-card">
<p class="text-center p-t-20 text-muted">Monthly expenses</p>
<canvas id="line_chart" height="150"></canvas>
</div>
<div class="report-card">
<p class="text-center p-t-20 text-muted">Monthly expenses</p>
<canvas id="bar_chart" height="150"></canvas>
</div>
<div class="report-card">
<p class="text-center p-t-20 text-muted">Monthly expenses</p>
<canvas id="line_styles_Chart" height="150"></canvas>
</div>