我在项目中实现了StockChart。但是,当我移动导航器时,图表也不会移动。好像导航器的移动对图表没有任何影响,与demo不同。
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
{% block extra_js %}
<script>
$('#id_date_to_3').datepicker({
uiLibrary: 'bootstrap4',
format: 'yyyy-mm-dd'
});
$('#id_date_from_3').datepicker({
uiLibrary: 'bootstrap4',
format: 'yyyy-mm-dd'
});
$(document).ready(function () {
interval = 20;
function getData() {
station_id = $('#id_station_id').val()
article_description = $('#id_article_description').val()
date_from = $('#id_date_from_3').val()
date_to = $('#id_date_to_3').val()
var chartData = [];
query_params = '?date_from=' + date_from + '&date_to=' + date_to + "&station_id=" + station_id + "&article_description=" + article_description
$.getJSON('/pareto/stability-control-data/' + query_params, function (data) {
Highcharts.each(data, function (el) {
var item = {
x: new Date(el[0]),
y: Number(el[1]),
};
console.log(item);
chartData.push(item);
var chart = new Highcharts.stockChart('chart-container', {
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y-%m-%d}',
rotation: 45,
align: 'left'
},
},
yAxis: {
labels: {
format: '{value} %'
}
},
rangeSelector: {
selected: 1,
},
series: [{
name: "Failures",
type: 'spline',
tooltip: {
valueDecimals: 2,
valueSuffix: '%'
},
data: chartData,
}],
title: {text: 'Failure status %'}
});
});
});
};
$("#submit").click(function () {
getData();
});
});
</script>
{% endblock %}
那是图表:
和数据:JSON file
编辑:我已经更新了答案。我在JS代码和html标头上添加了更多内容。我试图将代码放在JSFiddle上,但是我无法使其运行。这是代码的链接:https://jsfiddle.net/kashan_91/2a6exny9/11/
我认为数据调用方式或类似的方式存在问题。 Highcharts代码本身不是问题的原因,而是其他JS。