我有此代码:
data: {
x : 'x',
columns: [
['x', '30.03', '31.03', '01.04', '02.04', '03.04', '04.04', '05.04'],
['Ilość wejść', 0, 0, 0, 0, 0, 0, 1]
],
看起来:
问题在这里:
['x', '30.03', '31.03', '01.04', '02.04', '03.04', '04.04', '05.04'],
如何使此值可以作为字符串而不是日期格式接受?
我想你的目标是得到这样的东西:
我从未使用过该库,但是我在他们的网站上进行了一些研究并编码以下内容:
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['x', '30.03', '31.03', '01.04', '02.04', '03.04', '04.04', '05.04'],
['Ilość wejść', 0, 0, 0, 0, 0, 0, 1]
],
axes: {
data2: 'y2'
},
types: {
'Ilość wejść': 'bar'
}
},
axis: {
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
C3网站:https://c3js.org/gettingstarted.html#generate
我想推荐chart.js,我认为它更易于使用,文档更完善,更多的人使用它。
使用chart.js我得到了这个结果:
<!doctype html>
<html>
<head>
<title>Line Styles</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var ctx = document.getElementById('canvas').getContext('2d')
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Bar Dataset',
data: [0, 0, 0, 0, 0, 0, 1]
}, {
label: 'Line Dataset',
data: [30.03, 31.03, 1.04, 2.04, 3.04, 4.04, 5.04],
// Changes this dataset to become a line
type: 'line'
}],
labels: ['1', '2', '3', '4','5','6','7']
},
});
</script>
</body>
</html>