隐藏标签上的比例尺单击Charts.js

时间:2016-12-12 19:19:23

标签: javascript html canvas charts chart.js

我有一个带有两个数据集(行)的简单Charts.js折线图。 当我单击其中一个图例标签时,会切换图表中线条的可见性,但仍会显示垂直比例尺。我的问题是如何使垂直比例尺显示并隐藏在线旁边?

var data = {
    labels: [1, 2, 3, 4],
    datasets: [
        {
            label: "(Mbps) UP",
            fill: false,
            yAxisID: "y-axis-upstream",
            backgroundColor: "#98B954",
            borderColor: "#98B954",
            pointBorderColor: "#98B954",
            pointBackgroundColor: "#fff",
            pointHoverBackgroundColor: "#98B954",
            pointHoverBorderColor: "#98B954",
            data: [1, 2, 3, 4]
        },
        {
            label: "(Mbps) DOWN",
            fill: false,
            yAxisID: "y-axis-downstream",
            backgroundColor: "#BE4B48",
            borderColor: "#BE4B48",
            pointBorderColor: "#BE4B48",
            pointBackgroundColor: "#fff",
            pointHoverBackgroundColor: "#BE4B48",
            pointHoverBorderColor: "#BE4B48",
            data: [10, 22, 33, 43]
        }
    ]
};
var options = {
    title: {
        display: true,
        text: "Chart Title"
    },
    legend: {
        display: true,
        position: "top"
    },
    scales: {
        yAxes: [
            {
                id: "y-axis-upstream",
                type: "linear",
                display: true,
                position: "left",
                stepSize: 0.1,
                fixedStepSize: 0.1,
                gridLines: {
                    color: "rgba(152, 185, 84, 0.4)"
                },
                ticks: {
                    display: true,
                    fontColor: "#98B954"
                }
            },
            {
                id: "y-axis-downstream",
                type: "linear",
                display: true,
                position: "right",
                stepSize: 0.1,
                fixedStepSize: 0.1,
                gridLines: {
                    color: "rgba(190, 75, 72, 0.2)"
                },
                ticks: {
                    display: true,
                    fontColor: "#BE4B48"
                }
            }
        ]
    }
};

var ctx = document.getElementById("chartID");

var chart = new Chart(ctx, {
    type: type,
    data: data,
    options: options
});

0 个答案:

没有答案