Question

大家好，

我有多个用于测量温度和湿度的传感器。对于每个传感器，我都会在网络服务器上的每张图中两行显示一个chart.js图：温度和湿度。对于这些数据，我希望每一行都是自己的y轴。我试图复制Chart.js Line Chart Multiple Axes的示例

但是它不起作用。如果查看源代码，则会看到此错误消息：

Chart.bundle.min.js:10 Uncaught TypeError: Cannot read property 'getBasePixel' of undefined
    at i.updateElement (Chart.bundle.min.js:10)
    at i.update (Chart.bundle.min.js:10)
    at i.reset (Chart.bundle.min.js:10)
    at Chart.bundle.min.js:10
    at Object.each (Chart.bundle.min.js:10)
    at t.update (Chart.bundle.min.js:10)
    at t.construct (Chart.bundle.min.js:10)
    at new t (Chart.bundle.min.js:10)
    at buildChart (sensorlog:116)
    at HTMLDocument.<anonymous> (sensorlog:163)
updateElement @ Chart.bundle.min.js:10
update @ Chart.bundle.min.js:10
reset @ Chart.bundle.min.js:10
(anonymous) @ Chart.bundle.min.js:10
each @ Chart.bundle.min.js:10
update @ Chart.bundle.min.js:10
construct @ Chart.bundle.min.js:10
t @ Chart.bundle.min.js:10
buildChart @ sensorlog:116
(anonymous) @ sensorlog:163
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2

我不知道是否输入错误或缩进错误，或者我的代码有问题。希望有人可以帮助我，在此先感谢。这是我的代码：

{% block tail %}
    <script src="/static/js/Chart.min.js"></script>
    <script src="/static/js/Chart.bundle.min.js"></script>
    <script>
        function buildChart(id, labels, humidity, temperature) {
            var ctx = $(id).get(0).getContext('2d');
            var dhtChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: "Temperature (°C)",
                            borderColor: "rgba(255, 255, 0, 1)",
                            fillColor: "rgba(225, 225, 0, 1)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(225, 225, 0, 1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            yAxisID: 'y-axis-1',
                            data: temperature
                        },
                        {
                            label: "Humidity (%)",
                            borderColor: "rgba(0, 128, 255, 1)",
                            fillColor: "rgba(151,187,205,0.2)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            yAxisID: 'y-axis-2',
                            data: humidity
                        }]
                    },
                    options: {
                        scales: {
                            yAxis: [{
                                id: 'y-axis-1',                             
                                type: 'linear',
                                position: 'left',
                            }, {
                                id: 'y-axis-2',                             
                                type: 'linear',
                                position: 'right',
                            }]
                        }   
                    }
                });
            }
        $(document).ready(function() {
            {% for sensor in sensors %}
                buildChart('#sensor_chart_{{ sensor.id }}', ["{{ readings|join('\",\"', attribute='time')|safe }}"], [{{ readings|join(',', attribute='hum_value') }}], [{{ readings|join(',', attribute='temp_value') }}]);
            {% endfor %}
        });
    </script>
{% endblock %}

Answer 1

您使用了错误的选项格式Chart.js 。您必须更改

options: {
    scales: {
        yAxis: []
    }   
}

到

options: {
   scales: {
      yAxes: []
   }   
}

具有两个Y轴的Multi Line Chart.js

1 个答案: