如何修复 ChartJS 图例不起作用的问题
Posted
技术标签:
【中文标题】如何修复 ChartJS 图例不起作用的问题【英文标题】:How to fix ChartJS legend not working issue 【发布时间】:2019-04-17 00:23:40 【问题描述】:我正在为我的项目使用 chartjs,并且我的所有图表都可以正常工作,没有图例。问题是无论我做什么传奇都没有出现。这是我的代码。
var ctx1 = document.getElementById("chart1").getContext("2d");
var data1 =
labels: ["2018-11-05","2018-11-06","2018-11-07","2018-11-08","2018-11-09","2018-11-10","2018-11-11","2018-11-12","2018-11-13","2018-11-14"],
datasets: [
label: "Total Calls received",
fillColor: "rgba(220,220,220,0)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(18,175,203,1)",
data: [0,"2539","8091","9119","15621","13293","6892","6486","6605","931"] ,
label: "Total Calls Accepted",
fillColor: "rgba(34,186,160,0)",
strokeColor: "rgba(34,186,160,1)",
pointColor: "rgba(34,186,160,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(75,131,13,1)",
data: [0,"274","1443","1069","377","22","1268","1201","1356","236"] ,
label: "Eligible For Offers",
fillColor: "rgba(41,121,255,0)",
strokeColor: "rgba(41,121,255,1)",
pointColor: "rgba(41,121,255,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(0,78,203,1)",
data: [0,0,0,"2854","5573","6846","3270","3007","3413","649"]
]
;
var chart1 = new Chart(ctx1).Line(data1,
scaleShowGridLines: true,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth: 1,
scaleShowHorizontalLines: true,
scaleShowVerticalLines: true,
bezierCurve: true,
bezierCurveTension: 0.4,
pointDot: true,
pointDotRadius: 4,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 20,
datasetStroke: true,
datasetStrokeWidth: 2,
datasetFill: true,
responsive: true
);
注意* 在最后一个代码段的末尾添加图例选项不起作用。
【问题讨论】:
你能做一个小提琴吗? 【参考方案1】:试试这个...
var ctx1 = document.getElementById("chart1").getContext("2d");
var data1 =
labels: ["2018-11-05","2018-11-06","2018-11-07","2018-11-08","2018-11-09","2018-11-10","2018-11-11","2018-11-12","2018-11-13","2018-11-14"],
datasets: [
label: "Total Calls received",
fillColor: "rgba(220,220,220,0)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(18,175,203,1)",
data: [0,"2539","8091","9119","15621","13293","6892","6486","6605","931"] ,
label: "Total Calls Accepted",
fillColor: "rgba(34,186,160,0)",
strokeColor: "rgba(34,186,160,1)",
pointColor: "rgba(34,186,160,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(75,131,13,1)",
data: [0,"274","1443","1069","377","22","1268","1201","1356","236"] ,
label: "Eligible For Offers",
fillColor: "rgba(41,121,255,0)",
strokeColor: "rgba(41,121,255,1)",
pointColor: "rgba(41,121,255,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(0,78,203,1)",
data: [0,0,0,"2854","5573","6846","3270","3007","3413","649"]
]
;
var chart1 = new Chart(ctx1).Line(data1,
scaleShowGridLines: true,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth: 1,
scaleShowHorizontalLines: true,
scaleShowVerticalLines: true,
bezierCurve: true,
bezierCurveTension: 0.4,
pointDot: true,
pointDotRadius: 4,
pointDotStrokeWidth: 1,
pointHitDetectionRadius: 20,
datasetStroke: true,
datasetStrokeWidth: 2,
datasetFill: true,
responsive: true
);
document.getElementById('legends').innerhtml = chart1.generateLegend();
.chart-legend li span
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 100%; height: 100%;">
<canvas id="chart1" style="width: 100%; height: auto;"></canvas>
</div>
<div id="legends" class="chart-legend"></div>
【讨论】:
以上是关于如何修复 ChartJS 图例不起作用的问题的主要内容,如果未能解决你的问题,请参考以下文章