Question

js很新，但寻找帮助在一个页面上呈现两个图表（chart.js）。无法获得第二张图表。我想通过创建用不同的画布id分隔脚本，每个图表将分别呈现。目前，只呈现“早晨”图表。感谢

<div class="container-profile">
        <div class="container-week">
            <div class="col s12 m5">
                <div class="card-panel teal">
                    <h1>MORNING</h1>
                </div>
            </div>

            <div style="width:90%;">
                <canvas id="morningChart" class="morningChart" width="400" height="400"></canvas>
            </div>
        </div>

        <div class="container-week">
            <div class="col s12 m5">
                <div class="card-panel teal">
                    <h1>EVENING</h1>
                </div>
            </div>

            <div style="width:90%;">
                <canvas id="eveningChart" class="eveningChart" width="400" height="400"></canvas>
            </div>
        </div>
</div>

<script type="text/javascript">

    Chart.defaults.global.defaultFontColor = '#27AAE1'
    Chart.defaults.global.defaultFontFamily = 'Source+Sans+Pro';
    Chart.defaults.global.defaultFontSize = 40;
    Chart.defaults.global.title.fontStyle = 'lighter';
    Chart.defaults.global.title.text = "Weekly brushing morning";
    Chart.defaults.global.legend.display = false;

    const CHART = document.getElementById("morningChart");

    var morningChart = new Chart(CHART, {
        type: 'line',
        data: {
            labels: ["MON", "TUE", "WED", "THU", "FR", "SAT", "SUN"],
            datasets: [
                {
                    label: "Weekly brushing",
                    fill: true,
                    /*  lineTension: 0.2, */
                    backgroundColor: "rgba(39,170,225,0.2)",
                    borderColor: "rgba(39,170,225,100)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(39,170,225,100)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 5,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: {{morning_weekly}},
                    spanGaps: false,
                }
            ]
        },
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                        show: true,
                        color: "rgba(39,170,225,0.2)",
                        zeroLineColor: "rgba(39,170,225,1)"
                    },
                    scaleLabel: {
                        display: true,
                        fontFamily: "Helvetica",
                        fontColor: "#27AAE1"
                    },
                }],
                yAxes: [{
                    gridLines: {
                        show: true,
                        color: "rgba(39,170,225,0.2)",
                        zeroLineColor: "rgba(39,170,225,1)"
                    },
                    ticks: {
                        beginAtZero: true,
                        max: 6,
                        min: 0,
                        stepSize: 0.5
                    },
                }]
            }
        }
    });
</script>

<script type="text/javascript">

    Chart.defaults.global.defaultFontColor = '#27AAE1'
    Chart.defaults.global.defaultFontFamily = 'Source+Sans+Pro';
    Chart.defaults.global.defaultFontSize = 40;
    Chart.defaults.global.title.fontStyle = 'lighter';
    Chart.defaults.global.title.text = "Weekly brushing morning";
    Chart.defaults.global.legend.display = false;

    const CHART = document.getElementById("eveningChart");

    var eveningChart = new Chart(CHART, {
        type: 'line',
        data: {
            labels: ["MON", "TUE", "WED", "THU", "FR", "SAT", "SUN"],
            datasets: [
                {
                    label: "Weekly brushing",
                    fill: true,
                    /*  lineTension: 0.2, */
                    backgroundColor: "rgba(39,170,225,0.2)",
                    borderColor: "rgba(39,170,225,100)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(39,170,225,100)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 5,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: {{morning_weekly}},
                    spanGaps: false,
                }
            ]
        },
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                        show: true,
                        color: "rgba(39,170,225,0.2)",
                        zeroLineColor: "rgba(39,170,225,1)"
                    },
                    scaleLabel: {
                        display: true,
                        fontFamily: "Helvetica",
                        fontColor: "#27AAE1"
                    },
                }],
                yAxes: [{
                    gridLines: {
                        show: true,
                        color: "rgba(39,170,225,0.2)",
                        zeroLineColor: "rgba(39,170,225,1)"
                    },
                    ticks: {
                        beginAtZero: true,
                        max: 6,
                        min: 0,
                        stepSize: 0.5
                    },
                }]
            }
        }
    });
</script>

Answer 1

你不必两次做Chart.defaults.global。您不应该像使用const CHART和const Chart那样命名两个变量。这是你的代码。 http://codepen.io/anon/pen/QKoOJK在几次更改后似乎工作正常。

Chart.js在一个页面上呈现两个图表。

1 个答案: