Question

我正在尝试使用chart.js库创建折线图，我的目标是图表应该是单行，其下的区域不得填充。

但不管我放的颜色是什么，我都没有看到它变得清新。

这是生成图表的JS。

<table style="width: 100%">
        <tr>
            <td style="width: 50%; text-align: center">
                <canvas id="canvasForLineChart" height="200" width="400">Chart is Loading...</canvas>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        ////////////////////////////////////////////////////////////////////////////////////////////////////////
        //Line Chart JSON Config (Line Chart Has fixed 1 data series here)
        var lineChartData = {
            //labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    fill: false,               
                    lineTension: 0.1,
                    //backgroundColor: "#000000",
                    //borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    //pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    //pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    //pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: [0]
                }
            ]
        }

        //LineChart Update method
        function UpdateLineChart(data) {
            //Set data returned from Server
            //lineChartData.datasets[0].fillColor = data.colorString;
            lineChartData.datasets[0].data = data.lineChartData;
            lineChartData.labels = data.hora;
            //Update the Pie Chart
            var canvasForLineChart = document.getElementById("canvasForLineChart");
            var context2DLine = canvasForLineChart.getContext("2d");
            new Chart(context2DLine).Line(lineChartData);
        }

    </script>

但我的结果是：

我想要这样的事情：

Answer 1

backgroundColor 'rgba(0,0,0,0.1)'

那应该将你的不透明度设置为.1，你可以归零，但我应该测试它。我看到你注释掉了你设置的1个不透明度的边框颜色，这个颜色是实心的。

Answer 2

fill: false

应该做什么工作，你在哪里调用UpdateLineChart函数？

Answer 3

根据Chart JS Docs，您需要指定：

 fill: false

在图表选项中。您的代码看起来像这样：

function UpdateLineChart(data) {
        //Set data returned from Server
        lineChartData.datasets[0].data = data.lineChartData;
        lineChartData.labels = data.hora;
        //Update the Pie Chart
        var canvasForLineChart = document.getElementById("canvasForLineChart");
        var context2DLine = canvasForLineChart.getContext("2d");
        var myChart = new Chart(context2DLine, {
            data: {
                datasets: [{
                  fill: false,               
                  lineTension: 0.1,
                  borderCapStyle: 'butt',
                  borderDash: [],
                  borderDashOffset: 0.0,
                  borderJoinStyle: 'miter',
                  pointBackgroundColor: "#fff",
                  pointBorderWidth: 1,
                  pointHoverRadius: 5,
                  pointHoverBorderWidth: 2,
                  pointRadius: 1,
                  pointHitRadius: 10,
                  data: [0]
                }]                
             }
        });
    }

如何使用Chart.JS创建折线图（未填充）

3 个答案: