我知道有一些例子，但它们对我不起作用。 我正在使用joomla并尝试在选项卡中嵌入折线图，在第一个选项卡上工作但不在第二个选项卡上，任何想法都将受到赞赏。
这是脚本，我真的不太了解javascript。
非常感谢：
<canvas id="myChart-a" height="320" width="1200"></canvas>
<script src="templates/jux_forlio/js/chart.js"></script>
<script type="text/javascript">
var lineChartData = {
labels : ["January","February","March","April","May","June","July","August","September","October","November","December"],
datasets : [
{
fillColor : "rgba(162,29,9,0.5)",
strokeColor : "rgba(162,29,9,1)",
pointColor : "rgba(162,29,9,1)",
pointStrokeColor : "#fff",
data : [30,29,26,23,19,16,15,17,19,22,25,28]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [20,19,17,14,10,8,7,9,10,13,16,18]
}
]
},
options = {
//Boolean - If we show the scale above the chart data
scaleOverlay : true,
scaleShowValues : true,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(f,f,f,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : true,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 20,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#fff",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null,
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true
}
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart-a").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineChartData, options);
</script>
答案 0 :(得分：0)
假设标签HTML包含“li”标签 - 就像这样 -
<li class="" onclick="javascript:drawChart();"> </li>
注意：点击javascript函数时会调用。为要显示图表的tab-li添加onclick属性。
然后剩下的代码保持不变，除了下面给出的行在JS函数内移动。
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart-a").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineChartData, options);
这应该可以做到！
<script>
var lineChartData = {
labels : ["January","February","March","April","May","June","July","August","September","October","November","December"],
datasets : [
{
fillColor : "rgba(162,29,9,0.5)",
strokeColor : "rgba(162,29,9,1)",
pointColor : "rgba(162,29,9,1)",
pointStrokeColor : "#fff",
data : [30,29,26,23,19,16,15,17,19,22,25,28]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [20,19,17,14,10,8,7,9,10,13,16,18]
}
]
},
options = {
//Boolean - If we show the scale above the chart data
scaleOverlay : true,
scaleShowValues : true,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(f,f,f,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : true,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 20,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#fff",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - Whether the line is curved between points
bezierCurve : true,
//Boolean - Whether to show a dot for each point
pointDot : true,
//Number - Radius of each point dot in pixels
pointDotRadius : 3,
//Number - Pixel width of point dot stroke
pointDotStrokeWidth : 1,
//Boolean - Whether to show a stroke for datasets
datasetStroke : true,
//Number - Pixel width of dataset stroke
datasetStrokeWidth : 2,
//Boolean - Whether to fill the dataset with a colour
datasetFill : true,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null,
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true
}
function drawChart()
{
//Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart-a").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineChartData, options);
}
</script>
我希望这有帮助！