Javascript 沙特斯旺'；不在同一页的DIV中显示_Javascript_Jquery_Html_Css_Chart.js

Javascript 沙特斯旺'；不在同一页的DIV中显示

javascript jquery html css chart.js

Javascript 沙特斯旺'；不在同一页的DIV中显示,javascript,jquery,html,css,chart.js,Javascript,Jquery,Html,Css,Chart.js,当我从左分区单击时，我在右分区显示ChartJs中的PieChart时遇到问题。如果我尝试直接运行图表，它会工作，但我希望它们位于同一页面的不同分区中。我已经为每个链接放置了html文件，它工作得很好，但是当我想显示html中的饼图时，它就不工作了。我想知道我应该在哪里检查这个问题我现在很困惑选中此项：这是应显示的我的html：文件：bujanoci_chart.html <html> <head> <title>ChartJS - Pie C

当我从左分区单击时，我在右分区显示ChartJs中的PieChart时遇到问题。如果我尝试直接运行图表，它会工作，但我希望它们位于同一页面的不同分区中。我已经为每个链接放置了html文件，它工作得很好，但是当我想显示html中的饼图时，它就不工作了。我想知道我应该在哪里检查这个问题我现在很困惑

选中此项：

这是应显示的我的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>

多年期战略：

正文{
最大宽度：100%；边距：0自动
}
#马吉塔斯{
背景色：#DCDC；
宽度：35%；
高度：320px；
显示：内联块；
}
#贾塔斯{
宽度：65%；
高度：320px；
浮动：对；
显示：内联块；
}
#波希特{
宽度：100%；
身高：40%；
显示：内联块；
}
#我的画布{
背景色：#DCDC；
宽度：35%！重要；
身高：35%！重要；
浮动：对；
保证金权利：35%；
利润率最高：20%；
}
.土地{
填充：#eff2f0；
}
a:悬停，降落{
填充物：黄色；
}

尝试这样做吗？单击#presheva加载新数据集

var ctx=$（“#mycanvas”）.get（0.getContext（“2d”）；
//饼图数据
//值之和=360
风险值数据=[{
价值：270，
颜色：“矢车菊蓝”，
亮点：“天蓝色”，
标签：“第三”
},
{
价值：50，
颜色：“浅绿色”，
推荐理由：“黄绿色”，
标签：“第一”
},
{
价值：40，
颜色：“橙色”，
亮点：“darkorange”，
标签：“第二”
}
];
//画
var piechart=新图表（ctx）.Pie（数据）；
函数removeData（图表）{
chart.data.labels.pop（）；
chart.data.dataset.forEach（（数据集）=>{
dataset.data.pop（）；
});
chart.update（）；
}
$（#presheva”）。在（“单击”，函数（）上{
//$（“#posht”）.load（“elections/komuna#u preshev.html”）；
var ctx=$（“#mycanvas”）.get（0.getContext（“2d”）；
//饼图数据
//值之和=360
风险值数据=[{
价值：200，
颜色：“橙色”，
亮点：“粉色”，
标签：“第三”
},
{
数值：120，
颜色：“绿色”，
亮点：“棕色”，
标签：“第一”
},
{
价值：40，
颜色：“黑色”，
亮点：“darkorange”，
标签：“第二”
}
];
//画
var piechart=新图表（ctx）.Pie（数据）；
});
$（“#bujanoci”）。在（“单击”，function（）{}）；
$（“#trgovishte”）。在（“单击”，function（）{}）；
$（“#bosilegrad”）。在（“单击”，function（）{}）；
$（“#vraja”）。在（“单击”，function（）{}）；
$（“#vhan”）。在（“单击”，function（）{}）；
$（“#surdulica”）。在（“单击”，function（）{}）
正文{
最大宽度：100%；
保证金：0自动
}
#马吉塔斯{
背景色：#DCDC；
宽度：35%；
高度：320px；
显示：内联块；
}
#贾塔斯{
宽度：65%；
高度：320px；
浮动：对；
显示：内联块；
}
#波希特{
宽度：100%；
身高：40%；
显示：内联块；
}
#我的画布{
背景色：#DCDC；
宽度：35%！重要；
身高：35%！重要；
浮动：对；
保证金权利：35%；
利润率最高：20%；
}
.土地{
填充：#eff2f0；
}
a:悬停，降落{
填充物：黄色；
}

普辛斯基奥克鲁格酒店
普雷塞沃
布亚诺瓦克
VRANJE
V.韩
苏杜利卡
博西莱格勒
TRGOVISTE
马克多尼亚
保加利亚
科索沃
我认为您的问题在于您添加文档准备内容的顺序。您的链接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");
    }); });