我現(xiàn)在能印出這些數(shù)據(jù)
[{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-16"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-17"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-18"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-19"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-20"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-21"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-22"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-24"},{"1":"2018-08-25"},{"1":"2018-08-25"},{"1":"2018-08-30"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-08-31"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-01"},{"1":"2018-09-02"},{"1":"2018-09-02"}]
$chartData = $pdo->query(
"SELECT `add_time` FROM `view` "
);
$data = array();
$key = 0;
foreach ($chartData as $item){
$data[$key] = array(
'1' => date('Y-m-d',$item['add_time'])
);
$key++;
}
echo json_encode($data);
如果那一天有被點擊,則就會顯示在這
我想實現(xiàn)這種樣式:
可以把每一天列出來,甚至可以選擇月份,每一次看都是一整個月份的
然後可以隨著點擊次數(shù)顯示,有沒有類似的範本可以使用?
我有找到 https://c3js.org/ 但沒有類似的樣式
左側(cè)的東西我也不需要,但我不知怎麼拿掉?
而且我還要印出每個月的日期...
這該怎麼實現(xiàn)啊
我現(xiàn)在做到這樣了
只是現(xiàn)在有個問題
就是我要如何可以切換月份?以及如果該天沒有數(shù)據(jù),也要顯示日期
可以通過datetime插件來篩選時間,通過后端將這段時間的數(shù)據(jù)查詢出來渲染到chartjs圖表上
demo
https://jsfiddle.net/m7s43hrs...
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
xLabels: ["2018-08-01", "2018-08-02", "2018-08-03", "2018-08-04", "2018-08-05", "2018-08-06", "2018-08-07", "2018-08-09", "2018-08-10"],
yLabels: [],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 14, 16, 9, 10, 23, 17, 27],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}]
},
options: {
tooltips: {
callbacks: {
},
backgroundColor: '#FFF',
titleFontSize: 16,
titleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
},
scales:{
yAxes:[{
display:false
}]
}
}
});
將yLables值賦為[],將scales下yAxes的display屬性設(shè)置為false,這樣就可以讓y軸不顯示啦~
具體可以看官方文檔http://www.chartjs.org/docs/l... 或者 http://www.chartjs.org/sample...,還有什么問題可以跟我交流哦
用圖表庫就好了:
ECharts:
案例一:簡單
案例二:可縮放
給圖標添加一點點擊事件,然后修改數(shù)據(jù)源頭就好了,或者外部添加一些篩選按鈕。
有兩種思路
核心思想就是重新設(shè)置數(shù)據(jù)源就能顯示你想要的級別,甚至可以顯示到秒級
案例說明:http://echarts.baidu.com/exam...
當前顯示的是月份級別的
option = {
xAxis: {
type: 'category',
data: ['一月', '二月', '三月', '四月', '五月']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70],
type: 'bar'
}]
};
當我選擇月份的時候
option = {
xAxis: {
type: 'category',
data: ['1號', '2號', '3號', '4號']
},
yAxis: {
type: 'value'
},
series: [{
data: [1, 2, 3, 4],
type: 'bar'
}]
};
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學院和江蘇省首批服務(wù)外包人才培訓基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團,成為集合面授教學培訓、網(wǎng)
達內(nèi)教育集團成立于2002年,是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構(gòu),是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍懿科技有限責任公司從事總經(jīng)理職務(wù)負責iOS教學及管理工作。
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗,技術(shù)功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。