当我从左侧 DIV 中单击时，我无法在右侧 DIV 中显示来自 ChartJs 的饼图。如果我尝试直接运行图表，它会起作用，但我想将它们放在同一页面上，只是在不同的 DIV 中。 我已经为每个链接放置了 html 文件并且它工作正常，但是当我想显示 html 中的饼图时它不起作用。我想知道我现在困惑的问题应该在哪里检查。
检查这个:Fiddle project
这是我应该出现的 html: 文件:bujanoci_chart.html
<html>
<head>
<title>ChartJS - Pie Chart</title>
<link rel="stylesheet" href="/elections/jscss/svgcss.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="Chart.js"></script>
</head>
<body>
<div id="b_chart">
<canvas id="mycanvas" height="100" width="250"></canvas>
<script>
$(document).ready(function(){
var ctx = $("#mycanvas").get(0).getContext("2d");
//pie chart data
//sum of values = 360
var data = [
{
value: 270,
color: "cornflowerblue",
highlight: "lightskyblue",
label: "Third"
},
{
value: 50,
color: "lightgreen",
highlight: "yellowgreen",
label: "First"
},
{
value: 40,
color: "orange",
highlight: "darkorange",
label: "Second"
}
];
//draw
var piechart = new Chart(ctx).Pie(data);
});
</script>
</div>
</body>
JS 脚本:
$(document).ready( function() {
$("#presheva").on("click", function() {
$("#posht").load("elections/komuna_preshev.html");
});
$("#bujanoci").on("click", function() {
$("#djathtas").load("elections/bujanoc/bujanoci_chart.html");
});
$("#trgovishte").on("click", function() {
$("#djathtas").load("elections/trgovishte.html");
});
$("#bosilegrad").on("click", function() {
$("#djathtas").load("elections/bosilegrad.html");
});
$("#vraja").on("click", function() {
$("#djathtas").load("elections/vraja.html");
});
$("#vhan").on("click", function() {
$("#djathtas").load("elections/vhan.html");
});
$("#surdulica").on("click", function() {
$("#djathtas").load("elections/surdulica.html");
}); });
Mycss:
body {
max-width: 100%; margin: 0 auto
}
#majtas{
background-color: #DCDCDC;
width: 35%;
height: 320px;
display: inline-block;
}
#djathtas{
width: 65%;
height: 320px;
float: right;
display: inline-block;
}
#posht{
width: 100%;
height: 40%;
display: inline-block;
}
#mycanvas{
background-color: #DCDCDC;
width: 35% !important;
height: 35% !important;
float: right;
margin-right: 35%;
margin-top: 20%;
}
.land{
fill: #eff2f0;
}
a:hover .land{
fill: yellow;
}最佳答案
尝试做这样的事情？点击#presheva 加载新数据集。
var ctx = $("#mycanvas").get(0).getContext("2d");
//pie chart data
//sum of values = 360
var data = [{
value: 270,
color: "cornflowerblue",
highlight: "lightskyblue",
label: "Third"
},
{
value: 50,
color: "lightgreen",
highlight: "yellowgreen",
label: "First"
},
{
value: 40,
color: "orange",
highlight: "darkorange",
label: "Second"
}
];
//draw
var piechart = new Chart(ctx).Pie(data);
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
$("#presheva").on("click", function() {
// $("#posht").load("elections/komuna_preshev.html");
var ctx = $("#mycanvas").get(0).getContext("2d");
//pie chart data
//sum of values = 360
var data = [{
value: 200,
color: "orange",
highlight: "pink",
label: "Third"
},
{
value: 120,
color: "green",
highlight: "brown",
label: "First"
},
{
value: 40,
color: "black",
highlight: "darkorange",
label: "Second"
}
];
//draw
var piechart = new Chart(ctx).Pie(data);
});
$("#bujanoci").on("click", function() {});
$("#trgovishte").on("click", function() {});
$("#bosilegrad").on("click", function() {});
$("#vraja").on("click", function() {});
$("#vhan").on("click", function() {});
$("#surdulica").on("click", function() {});body {
max-width: 100%;
margin: 0 auto
}
#majtas {
background-color: #DCDCDC;
width: 35%;
height: 320px;
display: inline-block;
}
#djathtas {
width: 65%;
height: 320px;
float: right;
display: inline-block;
}
#posht {
width: 100%;
height: 40%;
display: inline-block;
}
#mycanvas {
background-color: #DCDCDC;
width: 35% !important;
height: 35% !important;
float: right;
margin-right: 35%;
margin-top: 20%;
}
.land {
fill: #eff2f0;
}
a:hover .land {
fill: yellow;
}<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<div class="komplet">
<div id="majtas">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 790 1080" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" stroke="null" style="vector-effect: non-scaling-stroke;">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g stroke="null">
<title stroke="null">Pcinjski Okrug</title>
<a href="#" id="presheva"><path class="land" stroke="#000000" id="svg_4" d="m25.524693,415.428482c0,0 -15.759451,-0.809455 -15.759451,-0.809455c0,0 -9.630776,-14.570185 -9.630776,-14.570185c0,0 0,-17.808005 0,-17.808005c0,0 4.377625,-14.570186 4.377625,-14.570186c0,0 10.506301,0.809455 9.663146,0.629636c-0.843155,-0.179818 18.353657,-3.058 18.353657,-3.058c0,0 6.128675,-11.332367 6.128675,-11.332367c0,0 15.759452,2.428365 14.916295,2.248546c-0.843156,-0.179818 7.847357,-7.105274 7.847357,-7.105274c0,0 8.755251,-10.522912 8.755251,-10.522912c0,0 10.506301,8.904002 10.506301,8.904002c0,0 12.257351,6.475638 11.414193,6.29582c-0.843157,-0.179818 21.85576,5.846002 21.012602,5.666183c-0.843159,-0.179818 11.349459,-0.629636 11.349459,-0.629636c0,0 -6.128676,17.808005 -6.128676,17.808005c0,0 4.377626,14.570185 4.377626,14.570185c0,0 16.634976,5.666184 15.791817,5.486364c-0.843159,-0.179819 20.980236,-4.676909 20.137076,-4.856728c-0.84316,-0.17982 15.727086,2.608183 15.727086,2.608183c0,0 10.506301,12.141822 10.506301,12.141822c0,0 7.879726,7.285093 7.036565,7.105273c-0.843161,-0.17982 -8.787615,12.321641 -8.787615,12.321641c0,0 -17.510502,-0.809455 -15.759452,-1.618909c1.75105,-0.809455 -2.626575,7.285092 -3.469735,7.105272c-0.84316,-0.179821 -0.90789,9.083823 -1.75105,8.904002c-0.84316,-0.179821 -5.285516,9.083823 -5.285516,9.083823c0,0 -14.883926,4.047274 -14.883926,4.047274c0,0 -21.888127,4.856729 -22.731285,4.676907c-0.843158,-0.179821 -5.285517,13.131098 -5.285517,13.131098c0,0 -17.510502,-3.237819 -17.510502,-3.237819c0,0 -12.445147,4.595011 -23.639177,-5.666184c-11.19403,-10.261194 -15.759451,-4.047273 -15.759451,-4.047273c0,0 -16.634977,-4.856729 -16.634977,-4.856729c0,0 2.626576,-11.332367 2.626576,-11.332367c0,0 -16.634977,-16.99855 -16.634977,-16.99855c0,0 -0.875525,-9.713457 -0.875525,-9.713457z" fill="#eff2f0"/></a>
<a href="#" id="bujanoci"><path class="land" stroke="#000000" id="svg_8" d="m190.528078,414.836065c0,0 0,-8.964079 0,-9.220195c0,-0.256117 10.803842,-1.280583 10.803842,-1.280583c0,0 6.648518,4.866214 6.648518,4.866214c0,0 3.878302,7.171263 3.878302,7.171263c0,0 4.155324,-0.256117 4.155324,-0.256117c0,0 3.601281,-2.817282 3.601281,-2.817282c0,0 3.601281,4.097865 3.601281,4.097865c0,0 5.540432,3.841748 5.540432,3.841748c0,0 7.202561,1.536699 7.202561,1.024466c0,-0.512233 16.067252,-10.244661 16.067252,-10.244661c0,0 0,-19.20874 0,-19.20874c0,0 2.216173,-7.171263 2.216173,-7.171263c0,0 -5.540432,-5.89068 -5.540432,-5.89068c0,0 6.371497,-7.171263 6.371497,-7.171263c0,0 6.371497,-4.353981 6.371497,-4.353981c0,0 -5.540432,-9.476312 -5.540432,-9.220195c0,0.256117 4.986389,-2.561165 4.986389,-2.561165c0,0 6.371497,-6.915146 6.371497,-6.915146c0,0 -8.310648,-5.122331 -8.310648,-5.122331c0,0 -3.601281,-6.915146 -3.601281,-6.915146c0,0 -15.236188,-0.512233 -15.236188,-0.512233c0,0 -10.803842,-8.195729 -10.803842,-8.195729c0,0 0.831065,-6.915146 0.716528,-6.930582c-0.114537,-0.015436 -12.628456,0.271552 -12.628456,0.271552c0,0 -17.45236,-20.745439 -17.45236,-20.745439c0,0 -14.682144,-7.427379 -14.682144,-7.427379c0,0 -13.297036,-16.903691 -13.297036,-16.903691c0,0 -8.310648,-13.31806 -8.310648,-13.31806c0,0 -16.067252,-13.31806 -16.067252,-13.31806c0,0 -8.310648,-3.073398 -8.310648,-3.073398c0,0 0.554043,-17.415924 0.554043,-17.415924c0,0 6.371497,-8.195729 6.256958,-8.211166c-0.114538,-0.015437 1.776668,-9.716991 1.776668,-9.716991c0,0 6.92554,-0.256117 6.811002,-0.271554c-0.114538,-0.015437 14.796683,-10.229224 14.796683,-10.229224c0,0 16.344274,-10.756894 16.344274,-10.756894c0,0 9.418734,-9.220195 9.418734,-9.220195c0,0 -4.432345,-8.707962 -4.432345,-8.707962c0,0 -4.986389,-9.732428 -4.986389,-9.732428c0,0 -6.371497,-9.476312 -6.371497,-9.476312c0,0 -13.020015,-0.512233 -13.020015,-0.512233c0,0 -8.310648,-5.122331 -8.310648,-5.122331c0,0 -6.371497,-0.76835 -6.371497,-0.76835c0,0 -3.324259,10.244661 -3.324259,10.244661c0,0 -3.878302,0 -3.878302,0c0,0 -6.094475,-1.792816 -6.094475,-1.792816c0,0 -4.432345,8.195729 -4.432345,8.195729c0,0 -0.554043,14.342526 -0.554043,14.342526c0,0 -12.18895,6.915146 -12.18895,6.915146c0,0 11.080864,21.769905 11.080864,22.026022c0,0.256117 -2.216173,8.964079 -2.216173,8.964079c0,0 -3.601281,6.915146 -3.601281,7.171263c0,0.256117 -10.803842,1.280583 -10.803842,1.280583c0,0 -11.634907,0 -11.634907,0c0,0 -6.648518,11.013011 -6.648518,11.013011c0,0 1.66213,9.988545 1.66213,9.988545c0,0 8.033626,5.378447 8.033626,5.378447c0,0 -0.831065,3.841748 -0.831065,3.841748c0,0 -10.249799,-1.536699 -10.249799,-1.536699c0,0 -1.108086,7.427379 -1.108086,7.427379c0,0 -12.465972,8.451846 -12.465972,8.451846c0,0 -2.216173,8.707962 -2.216173,8.707962c0,0 -8.587669,8.964079 -8.587669,8.964079c0,0 -16.621296,16.903691 -16.621296,16.903691c0,0 9.695756,16.391458 9.695756,16.391458c0,0 4.986389,12.54971 4.986389,12.54971c0,0 2.493194,12.293594 2.493194,12.293594c0,0 17.45236,11.269127 17.45236,11.269127c0,0 14.959166,2.817282 14.959166,2.817282c0,0 10.803842,1.024466 10.803842,1.024466c0,0 4.432345,4.097865 4.432345,4.097865c0,0 -1.66213,8.707962 -1.66213,8.707962c0,0 -1.385108,10.244661 -1.385108,10.244661c0,0 3.047238,9.476312 3.047238,9.476312c0,0 12.18895,5.634564 12.18895,5.634564c0,0 11.911928,-2.561165 11.911928,-2.561165c0,0 13.85108,-1.536699 13.85108,-1.536699c0,0 13.020015,3.841748 13.020015,3.841748c0,0 8.864691,9.476312 8.864691,9.476312c0,0 10.803842,7.427379 10.803842,7.427379z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#eff2f0"/></a>
<a href="#" id="trgovishte"><path class="land" stroke="#000000" id="svg_9" d="m247.129753,389.196212c0,0 6.744786,-0.479677 6.744786,-0.479677c0,0 14.52723,9.113861 15.04606,9.113861c0.51883,0 18.159038,11.512245 18.159038,11.512245c0,0 16.602549,16.309014 16.602549,15.34966c0,-0.959354 12.451912,-10.073214 12.451912,-10.073214c0,0 11.414252,8.634184 11.414252,8.634184c0,0 30.61095,-12.951276 30.61095,-12.951276c0,0 8.301275,6.715476 8.301275,6.715476c0,0 9.857763,-12.471599 9.857763,-12.471599c0,0 14.52723,3.837415 14.008401,3.357738c-0.51883,-0.479677 12.451912,-10.073214 12.451912,-10.073214c0,0 6.744786,-11.512245 6.744786,-11.512245c0,0 25.422653,2.878061 25.422653,2.878061c0,0 2.594148,-11.991922 2.594148,-11.991922c0,0 9.857763,-9.593538 9.857763,-9.593538c0,0 9.338934,1.439031 9.338934,1.439031c0,0 9.857763,-6.235799 9.857763,-6.235799c0,0 14.008401,-1.918708 14.008401,-1.439031c0,0.479677 2.075319,-31.178997 2.075319,-31.178997c0,0 2.594148,-9.593538 2.594148,-9.593538c0,0 -7.263615,-7.195153 -7.263615,-7.195153c0,0 -8.301275,-5.756123 -8.301275,-5.756123c0,0 0,-7.195153 0,-7.195153c0,0 -10.895423,-7.67483 -10.895423,-7.67483c0,0 -14.008401,-2.398384 -14.008401,-2.398384c0,0 -7.782445,-7.67483 -7.782445,-7.67483c0,0 -12.970741,-9.593538 -12.970741,-9.593538c0,0 -12.970741,11.991922 -12.970741,11.991922c0,0 1.037659,10.073214 1.037659,10.073214c0,0 -13.489571,1.439031 -13.489571,1.439031c0,0 -5.707126,9.593538 -5.707126,9.593538c0,0 -24.384994,-0.479677 -24.384994,-0.479677c0,0 -13.489571,-8.634184 -13.489571,-8.634184c0,0 -1.037659,25.422875 -1.037659,25.422875c0,0 -17.121379,-0.959354 -17.121379,-0.959354c0,0 -22.828505,14.390306 -22.828505,14.390306c0,0 -12.970741,-4.796769 -12.970741,-4.796769c0,0 -5.707126,-7.67483 -5.707126,-7.67483c0,0 -1.037659,10.552891 -1.037659,10.552891c0,0 -11.414252,0 -11.414252,0c0,0 -12.451912,5.276446 -12.970741,5.276446c-0.51883,0 -10.895423,5.756123 -10.895423,5.756123c0,0 -9.338934,11.991922 -9.338934,11.991922c0,0 2.075319,8.634184 2.075319,8.634184c0,0 -8.820104,10.552891 -8.820104,10.552891c0,0 4.150637,12.951276 4.150637,12.951276z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#eff2f0"/></a>
<a href="#" id="bosilegrad"><path class="land" stroke="#000000" id="svg_10" d="m456.218105,177.658707c0,0 5.707126,14.869983 5.707126,14.869983c0,0 14.008401,-1.918708 13.489571,-1.439031c-0.51883,0.479677 6.744786,-4.317092 6.744786,-4.317092c0,0 8.301275,11.991922 8.301275,11.991922c0,0 41.506373,-0.959354 41.506373,-0.959354c0,0 6.225956,6.235799 6.225956,6.235799c0,0 8.301275,-2.398384 8.301275,-2.398384c0,0 3.631808,6.715476 3.631808,6.715476c0,0 11.933082,-0.959354 12.451912,-0.959354c0.51883,0 12.451912,0.479677 12.451912,0.479677c0,0 12.451912,12.471599 12.451912,12.471599c0,0 10.895423,14.869983 10.895423,14.869983c0,0 11.933082,0.959354 11.933082,0.959354c0,0 12.970741,16.788691 12.970741,16.788691c0,0 11.414252,26.861905 11.414252,26.861905c0,0 -9.857763,11.512245 -9.857763,11.512245c0,0 1.556489,13.91063 1.556489,13.91063c0,0 -6.744786,5.756123 -6.744786,5.756123c0,0 1.556489,11.512245 2.594148,11.512245c1.037659,0 -7.263615,17.748045 -7.263615,17.748045c0,0 -27.497972,5.276446 -27.497972,5.276446c0,0 0,8.634184 0,8.634184c0,0 -13.489571,10.073214 -13.489571,11.032568c0,0.959354 1.037659,24.463521 1.037659,24.463521c0,0 -12.451912,9.593538 -12.451912,9.593538c0,0 -15.04606,-3.357738 -15.04606,-3.357738c0,0 -10.895423,-1.439031 -10.895423,-1.439031c0,0 -19.196697,8.154507 -19.196697,8.154507c0,0 -7.263615,7.67483 -8.301275,7.67483c-1.037659,0 -43.581691,-26.382228 -44.100521,-26.861905c-0.51883,-0.479677 1.037659,-15.34966 1.037659,-15.34966c0,0 13.489571,-11.512245 13.489571,-11.512245c0,0 1.556489,-18.707398 1.556489,-18.707398c0,0 3.112978,-14.869983 3.112978,-14.869983c0,0 -11.933082,-11.991922 -11.933082,-11.991922c0,0 -4.150637,-2.878061 -4.150637,-2.878061c0,0 -3.631808,-9.593538 -3.631808,-9.593538c0,0 -12.451912,-4.317092 -12.451912,-4.317092c0,0 -11.414252,-5.276446 -11.414252,-5.276446c0,0 -11.933082,-9.113861 -11.933082,-9.113861c0,0 -9.338934,-6.235799 -9.338934,-6.235799c0,0 0,-26.382228 0,-26.382228c0,0 10.376593,-7.195153 10.376593,-7.195153c0,0 -1.556489,-14.869983 -1.556489,-14.869983c0,0 4.150637,-13.430953 4.150637,-13.430953c0,0 7.263615,-2.398384 7.263615,-2.398384c0,0 4.150637,-11.032568 5.188297,-11.991922c1.037659,-0.959354 11.414252,-19.666752 11.414252,-19.666752z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#eff2f0"/></a>
<a href="#" id="vraja"><path class="land" stroke="#000000" id="svg_11" d="m151.924511,145.760195c0,0 -2.594148,-6.715476 -2.594148,-6.715476c0,0 -9.338934,-11.991922 -9.338934,-11.991922c0,0 -6.225956,-8.154507 -6.225956,-8.154507c0,0 -5.188297,-11.512245 -5.188297,-11.512245c0,0 12.970741,0.479677 12.970741,0.479677c0,0 4.669467,-9.113861 4.669467,-9.113861c0,0 3.631808,-8.634184 3.631808,-8.634184c0,0 -2.594148,-18.707398 -2.594148,-18.707398c0,0 10.376593,0 10.376593,0c0,0 -0.51883,-8.154507 -0.51883,-8.154507c0,0 9.857763,-3.357738 9.857763,-3.357738c0,0 -2.594148,-8.154507 -2.594148,-8.154507c0,0 6.225956,-9.593538 6.225956,-9.593538c0,0 10.895423,0 10.895423,0c0,0 6.744786,-4.796769 6.225956,-4.796769c-0.51883,0 15.04606,4.796769 15.04606,4.796769c0,0 8.301275,-7.195153 8.301275,-7.195153c0,0 20.234357,0.479677 20.234357,0.479677c0,0 4.150637,-5.756123 4.150637,-5.756123c0,0 12.970741,6.715476 12.970741,6.715476c0,0 -2.075319,9.113861 -2.075319,9.113861c0,0 -6.744786,-1.439031 -7.782445,-1.439031c-1.037659,0 -0.51883,8.634184 -0.51883,8.634184c0,0 -6.225956,7.67483 -6.225956,7.67483c0,0 0.51883,10.552891 0.51883,10.552891c0,0 4.150637,9.113861 4.150637,9.113861c0,0 -4.669467,15.829337 -4.669467,15.829337c0,0 -3.631808,27.821259 -3.631808,27.821259c0,0 2.594148,34.536735 2.594148,34.536735c0,0 9.338934,10.073214 9.338934,10.073214c0,0 16.083719,-3.837415 16.083719,-3.357738c0,0.479677 7.782445,11.991922 7.782445,11.991922c0,0 3.112978,20.626106 3.112978,20.626106c0,0 20.753186,1.918708 20.753186,1.918708c0,0 22.309675,-18.227721 22.309675,-18.227721c0,0 27.497972,11.032568 27.497972,11.032568c0,0 26.460313,-1.918708 26.979142,-1.918708c0.51883,0 -0.51883,-12.471599 -0.51883,-12.471599c0,0 14.52723,-2.878061 14.52723,-2.878061c0,0 19.196697,23.02449 19.196697,23.02449c0,0 18.159038,-0.479677 18.159038,-0.479677c0,0 10.376593,13.91063 10.376593,13.91063c0,0 8.820104,1.439031 8.820104,1.439031c0,0 -4.150637,10.552891 -4.150637,10.552891c0,0 1.556489,15.829337 1.556489,15.829337c0,0 -9.857763,7.195153 -9.857763,7.195153c0,0 1.556489,30.69932 1.556489,30.69932c0,0 -12.451912,10.073214 -12.451912,10.073214c0,0 2.075319,8.634184 2.075319,8.634184c0,0 -12.970741,3.357738 -12.970741,3.357738c0,0 -5.707126,8.154507 -5.707126,8.154507c0,0 -23.866164,0.479677 -23.866164,0.479677c0,0 -14.52723,-8.634184 -14.52723,-8.634184c0,0 -1.556489,22.065137 -2.075319,22.544813c-0.51883,0.479677 -16.083719,1.918708 -16.083719,1.918708c0,0 -23.347335,14.390306 -23.347335,14.390306c0,0 -13.489571,-5.756123 -13.489571,-5.756123c0,0 -5.188297,-9.593538 -5.188297,-9.593538c0,0 -1.556489,12.471599 -1.556489,12.471599c0,0 -7.782445,-0.479677 -8.301275,0c-0.51883,0.479677 -26.460313,13.430953 -26.460313,13.430953c0,0 -10.895423,-10.073214 -10.895423,-10.073214c0,0 -12.970741,-2.398384 -14.008401,-2.398384c-1.037659,0 -11.933082,-8.154507 -11.933082,-8.154507c0,0 -1.037659,-8.154507 -1.037659,-8.154507c0,0 -10.895423,0.959354 -10.895423,0.959354c0,0 -18.677868,-21.58546 -18.677868,-21.58546c0,0 -11.933082,-6.235799 -11.933082,-6.235799c0,0 -26.979142,-34.057059 -26.979142,-34.057059c0,0 -20.753186,-13.91063 -20.753186,-13.91063c0,0 9.338934,-31.658674 9.338934,-31.658674c0,0 49.288817,-33.097705 49.288817,-33.097705c0,0 -19.196697,-29.26029 -19.196697,-29.26029c0,0 -14.52723,-0.959354 -14.52723,-0.959354c0,0 -6.225956,-4.317092 -6.225956,-4.317092z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#eff2f0"/></a>
<a href="#" id="vhan"><path class="land" stroke="#000000" id="svg_12" d="m237.25028,64.35004c0,0 -12.350267,12.711142 -12.350267,12.711142c0,0 9.128458,16.133373 9.128458,16.133373c0,0 -4.832713,22.488944 -5.369681,23.466724c-0.536968,0.97778 -2.684841,54.2668 -2.684841,54.2668c0,0 12.350267,11.733362 12.350267,11.733362c0,0 12.350267,-3.422231 12.350267,-3.422231c0,0 11.276331,13.688923 11.276331,13.688923c0,0 1.073936,17.111153 1.073936,17.111153c0,0 22.015694,3.422231 22.015694,3.422231c0,0 23.08963,-16.133373 23.08963,-16.133373c0,0 26.311439,10.266692 26.848407,9.777802c0.536968,-0.48889 26.848407,-2.44445 26.848407,-2.44445c0,0 -1.610904,-12.222252 -1.610904,-12.222252c0,0 -27.922343,-12.222252 -27.922343,-12.222252c0,0 -5.369681,-23.955615 -5.369681,-23.955615c0,0 17.182981,-7.822241 17.182981,-7.822241c0,0 4.295745,-23.955615 4.295745,-23.955615c0,0 22.015694,-1.95556 22.015694,-1.95556c0,0 2.684841,-17.600043 2.684841,-17.600043c0,0 -12.350267,-8.311132 -12.350267,-8.311132c0,0 11.813299,-20.533384 11.813299,-20.533384c0,0 17.719949,-1.95556 17.719949,-1.95556c0,0 3.758777,-8.311132 3.758777,-8.311132c0,0 24.163566,-7.333351 24.163566,-7.333351c0,0 -6.980586,-15.644483 -6.980586,-15.644483c0,0 -8.59149,7.822241 -8.59149,8.311132c0,0.48889 -17.719949,-5.377791 -17.719949,-5.377791c0,0 -1.073936,-11.733362 -1.073936,-12.711142c0,-0.97778 -10.202395,1.46667 -10.202395,1.46667c0,0 -10.739363,14.177813 -10.739363,14.177813c0,0 -22.015694,-9.777802 -22.015694,-9.777802c0,0 13.961172,-8.311132 13.961172,-8.311132c0,0 -9.128458,-15.155593 -9.128458,-15.155593c0,0 -20.941758,0.97778 -20.941758,0.97778c0,0 -21.478726,14.177813 -21.478726,14.177813c0,0 -13.961172,1.46667 -13.961172,1.46667c0,0 -3.221809,-12.222252 -3.221809,-12.222252c0,0 -16.109044,2.44445 -16.109044,2.44445c0,0 -3.758777,17.600043 -3.758777,17.600043c0,0 -9.665427,4.888901 -9.665427,4.888901c0,0 -13.961172,3.422231 -13.961172,3.422231c0,0 -5.369681,16.133373 -5.369681,16.133373z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#eff2f0"/></a>
<a href="#" id="surdulica"><path class="land" stroke="#000000" id="svg_13" d="m417.176174,59.058598c0,0 24.903824,17.268368 24.903824,17.268368c0,0 21.272016,2.878061 21.272016,2.878061c0,0 5.188297,-12.951276 5.188297,-12.951276c0,0 16.602549,-7.195153 17.121379,-7.195153c0.51883,0 16.602549,-7.195153 16.602549,-7.195153c0,0 12.451912,-22.065137 12.451912,-22.065137c0,0 16.083719,-0.959354 16.083719,-0.959354c0,0 22.828505,-5.276446 22.828505,-5.276446c0,0 13.489571,23.983844 13.489571,23.983844c0,0 12.451912,21.105783 12.451912,21.105783c0,0 11.414252,16.309014 11.414252,16.309014c0,0 -8.820104,23.02449 -8.820104,23.02449c0,0 -10.376593,19.187075 -10.376593,19.187075c0,0 -2.075319,28.780613 -2.075319,28.780613c0,0 4.669467,19.187075 4.669467,19.187075c0,0 -4.669467,18.227721 -4.669467,18.227721c0,0 -11.414252,21.105783 -11.414252,21.105783c0,0 -6.225956,6.235799 -6.744786,6.235799c-0.51883,0 -11.414252,-2.878061 -11.414252,-2.878061c0,0 -14.52723,-5.276446 -14.52723,-5.276446c0,0 -30.61095,-0.959354 -30.61095,-0.959354c0,0 -11.414252,-9.113861 -11.414252,-9.113861c0,0 -19.196697,3.837415 -19.196697,3.357738c0,-0.479677 -7.263615,-15.34966 -7.263615,-15.34966c0,0 -18.159038,31.658674 -18.159038,31.658674c0,0 -14.008401,1.918708 -14.52723,1.918708c-0.51883,0 -12.451912,-12.951276 -12.451912,-12.951276c0,0 -18.159038,0 -18.159038,0c0,0 -19.196697,-23.504167 -19.715527,-23.504167c-0.51883,0 -14.52723,4.317092 -14.52723,4.317092c0,0 -28.535631,-11.991922 -28.535631,-11.991922c0,0 -5.188297,-23.504167 -5.188297,-23.504167c0,0 16.602549,-7.67483 16.602549,-7.67483c0,0 4.669467,-22.544813 4.669467,-22.544813c0,0 20.753186,-2.878061 20.753186,-2.878061c0,0 3.112978,-17.748045 3.112978,-17.748045c0,0 -11.933082,-11.032568 -11.933082,-11.032568c0,0 9.338934,-14.390306 9.338934,-14.390306c0,0 18.677868,-4.796769 18.677868,-4.796769c0,0 2.594148,-7.67483 2.594148,-7.67483c0,0 27.497972,-8.634184 27.497972,-8.634184z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#eff2f0"/></a>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="14" id="svg_18" y="423.917914" x="89.589524" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">PRESEVO</text>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="14" id="svg_19" y="352.089557" x="157.686539" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">BUJANOVAC</text>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="14" id="svg_20" y="275.597018" x="271.492509" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">VRANJE</text>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="14" id="svg_22" y="118.880599" x="288.171619" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">V. HAN</text>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="14" id="svg_23" y="148.731346" x="471.940279" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">SURDULICA</text>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="14" id="svg_24" y="282.126869" x="542.835798" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">BOSILEGRAD</text>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="14" id="svg_25" y="366.082094" x="363.73132" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">TRGOVISTE</text>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="14" id="svg_26" y="467.761198" x="359.999977" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">MAKEDONIJA</text>
<text transform="rotate(-91.32366943359375 619.5181884765625,173.4453125) " xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_27" y="181.380601" x="619.328333" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">BULGARIA</text>
<text transform="rotate(-90.47331237792969 43.960937500000036,198.63281250000003) " xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_28" y="206.567167" x="43.768631" opacity="0.4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">KOSOVO</text>
</g>
</svg>
</div>
<div id="djathtas">
<canvas id="mycanvas"></canvas>
</div>
<div id="posht"></div>
</div>关于javascript - ChartJs 不会出现在同一页面的 DIV 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44894702/