我有一个包含日期、一天中的小时数和参数值的 mysql 表。我想显示一个以一天中的小时为 x 轴和多条线的图表,每天一条线。我已经将数据转换为 json 格式,如何在 c3.js 中显示多行,每天一行?
json format: [
{"hour":"00:00:00","day":"2017-04-18","kpi":"41.54"},
{"hour":"01:00:00","day":"2017-04-18","kpi":"0.00"},
{"hour":"02:00:00","day":"2017-04-18","kpi":"0.00"},
{"hour":"03:00:00","day":"2017-04-18","kpi":"0.00"},
{"hour":"04:00:00","day":"2017-04-18","kpi":"0.00"},
{"hour":"05:00:00","day":"2017-04-18","kpi":"0.00"},
{"hour":"06:00:00","day":"2017-04-18","kpi":"31.94"},
{"hour":"07:00:00","day":"2017-04-18","kpi":"47.44"},
{"hour":"08:00:00","day":"2017-04-18","kpi":"35.05"},
{"hour":"09:00:00","day":"2017-04-18","kpi":"43.24"},
{"hour":"10:00:00","day":"2017-04-18","kpi":"32.40"},
{"hour":"11:00:00","day":"2017-04-18","kpi":"32.03"},
{"hour":"12:00:00","day":"2017-04-18","kpi":"37.22"},
{"hour":"13:00:00","day":"2017-04-18","kpi":"30.85"},
...
{"hour":"00:00:00","day":"2017-04-19","kpi":"44.88"},
{"hour":"01:00:00","day":"2017-04-19","kpi":"0.00"},
{"hour":"02:00:00","day":"2017-04-19","kpi":"0.00"},
{"hour":"03:00:00","day":"2017-04-19","kpi":"0.00"},
{"hour":"04:00:00","day":"2017-04-19","kpi":"0.00"},
{"hour":"05:00:00","day":"2017-04-19","kpi":"0.00"},
{"hour":"06:00:00","day":"2017-04-19","kpi":"38.75"},
{"hour":"07:00:00","day":"2017-04-19","kpi":"40.03"},
{"hour":"08:00:00","day":"2017-04-19","kpi":"37.36"}
]
最佳答案
查看 Timeseries example ,您可以制作一个图表来显示一天中的几个小时:
var xHours = ['myXValues', "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
timeFormat = '%H:%M';
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'myXValues',
xFormat: timeFormat,
columns: [
//xHours,
//['test', 30, 20, 10, 40, 15, 25],
],
},
axis: {
x: { type: 'timeseries' }
}
});
然后您需要拆分那个长 json 数组:对于每一天,创建一个包含该日期的 kpi
值的数组。
最后,将每个较小的数组加载到图表中 (chart.load()
)。
添加注释的示例:https://codepen.io/Sphinxxxx/pen/BRLPwP?editors=0010
关于javascript - 来自mysql数据c3的多折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43594329/