Question

我只想通过按钮和 y 轴标签从“幅度”切换到“温度”的图表类型。目前我遇到了销毁旧图表并创建新图表的问题。它是如何工作的？

HTML 元素：

<div style="height:100px; width:400px">
            <canvas id="myChart1" style="border: 1px solid #ccc"></canvas>
        </div>
<button id='temperature'>Temperature</button>

到目前为止我的 Javascript 代码：

<script>

var chartColors = {
    red: 'rgb(255, 99, 132)',
    orange: 'rgb(255, 159, 64)',
    yellow: 'rgb(255, 205, 86)',
    green: 'rgb(75, 192, 192)',
    blue: 'rgb(54, 162, 235)',
    purple: 'rgb(153, 102, 255)',
    grey: 'rgb(201, 203, 207)'
};


function onRefresh(chart) {
    chart.config.data.datasets.forEach(function(dataset) {
        dataset.data.push({
            x: Date.now(),
            y: loadData("data123.js",1).toFixed(2)
        });
    });
}

var color = Chart.helpers.color;

$("#temperature").click(function() {
  change('temperature');
});


var config1 = {
    type: 'line',
    data: {
        datasets: [{
            label: 'PORT 01 Schwingwert',
            backgroundColor: 'rgb(23, 99, 175)',
            borderColor: 'rgb(23, 99, 175)',
            fill: false,
            lineTension: 0,
            borderWidth: 2,
            cubicInterpolationMode: 'monotone',
            data: []
        }]
    },
    options: {
        title: {
            display: true,
            text: 'X Axis Zeitstempel (ms) / Y Axis Schwingungswert (m/sec)'
        },
        scales: {
            xAxes: [{
                type: 'realtime',
                time: {
                    displayFormats: {
                        second: "HH:mm:ss"
                        }
                },
                realtime: {
                    duration: 20000,
                    refresh: 1000,
                    delay: 2000,
                    onRefresh: onRefresh
                },
                scaleLabel: {
                            display: true,
                            labelString: 'Zeitstempel (ms)'
                             },
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Amplitude (m/sec)'
                }
            }]
        },
        tooltips: {
            mode: 'nearest',
            intersect: false
        },
        hover: {
            mode: 'nearest',
            intersect: false
        },
        elements: {
            point:{
                radius: 0
            }
        },

    },

    type: 'temperature',
    data: {
        datasets: [{
            label: 'PORT 01 Schwingwert',
            backgroundColor: 'rgb(23, 99, 175)',
            borderColor: 'rgb(23, 99, 175)',
            fill: false,
            lineTension: 0,
            borderWidth: 2,
            cubicInterpolationMode: 'monotone',
            data: []
        }]
    },
    options: {
        title: {
            display: true,
            text: 'X Axis Zeitstempel (ms) / Y Axis Schwingungswert (m/sec)'
        },
        scales: {
            xAxes: [{
                type: 'realtime',
                time: {
                    displayFormats: {
                        second: "HH:mm:ss"
                        }
                },
                realtime: {
                    duration: 20000,
                    refresh: 1000,
                    delay: 2000,
                    onRefresh: onRefresh
                },
                scaleLabel: {
                            display: true,
                            labelString: 'Zeitstempel (ms)'
                             },
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Temperature &#8451;'
                }
            }]
        },
        tooltips: {
            mode: 'nearest',
            intersect: false
        },
        hover: {
            mode: 'nearest',
            intersect: false
        },
        elements: {
            point:{
                radius: 0
            }
        },

    }
};

window.onload = function() {
    var ctx_1 = document.getElementById('myChart1').getContext('2d');
    window.myChart = new Chart(ctx_1, config1);

function change(newType) {
  var ctx_1 = document.getElementById("myChart1").getContext("2d");

  // Remove the old chart and all its event handles
  if (myChart1) {
    myChart1.destroy();
  }

  myChart = new Chart(ctx, {
     type: document.getElementById("chartType").value,
     data: myData

</script>

我在文档中没有找到任何关于此的内容...我做错了什么还是无法解决该问题？也许你们中的一个人有想法？那太好了！

Answer 1

示例代码不完整，但绘制和隐藏图表的想法如何？

我看到 jQuery 已经包含在内，所以我将使用该库。

<div style="height:100px; width:400px">
  <canvas id="myChart1" style="border: 1px solid #ccc; width:100%; height:100%;"></canvas>
  <canvas id="tempChart1" style="border: 1px solid #ff0000; width:100%; height:100%;"></canvas>
</div>
<button id='temperature'>Temperature</button>

<script>
$(function() {
   $("#tempChart1").hide();
   $("#temperature").on('click', function() {
      $("#tempChart1").toggle();
      $("#myChart1").toggle();
   });
});
// The rest of your code to show the charts
</script>

这将使您能够灵活地正确制作图表，然后在 jQuery 中只需 toggle，它添加了一种显示样式为 none。我确实在画布标签中添加了 height 和 width 以进行测试，否则按钮会被覆盖。

ChartJS - 通过更改 y 轴标签来更改图表类型

1 个答案: