Javascript图表显示标签

Question

我正在使用 chart.js 1.0.2 绘制这样的图表

这是我的代码:

var data = {
    labels: ["2015", "2016", "2017", "2018", "2019", "2020"],
    datasets: [{
        fillColor: "rgba(220,220,220,0)",
        strokeColor: "blue",
        data: [180, 390]
    }, {
        fillColor: "rgba(220,220,220,0)",
        strokeColor: "green",
        data: [180, 210, 405, 980, 1200, 1550]
    }, ]
}
var options = {
    bezierCurve: false,
    scaleFontSize: 13,
    scaleShowVerticalLines: false
};

var chart = document.getElementById('canvas').getContext('2d');
new Chart(chart).Line(data, options);

这是Fiddle

代码看起来不错，但有 3 个问题。

1. 该行应该以 2015 而不是 0 开头(如果将 fiddle 与上图进行比较，您就会认出)。我尝试了 scaleStartValue 但它不起作用。

2. 每个点上都有一个圆。我不要这个圈子我尝试使用 pointStyle:line 但它不起作用

3. 我需要在底部显示 2 行预算和支出的信息(如附图所示)。我在文档中没有找到任何与此相关的内容

如果已经实现了这种事情，请帮助我。提前致谢

Answer 1

从2015年开始

var data = {
            labels : ["0","2015", "2016", "2017", "2018", "2019", "2020"],
            datasets :
                [
                    {
                        fillColor : "rgba(220,220,220,0)",
                        strokeColor : "blue",
                        data : [null,180, 390]
                    },
                    {
                        fillColor : "rgba(220,220,220,0)",
                        strokeColor : "green",
                        data : [null,180, 210, 405, 980, 1200, 1550]
                    },
                ]
            }

在选项中使用 pointDot:false 删除每个点上的圆圈

  var options = {

           pointDot: false
}

用于显示标签使用

在 html 文件中

<canvas id="canvas" width="420" height="350"></canvas>
<div id="legend" class="chart-legend"></div>

在 JS 中

var data = {
            labels : ["0","2015", "2016", "2017", "2018", "2019", "2020"],
            datasets :
                [
                    {
                        fillColor : "rgba(220,220,220,0)",
                        strokeColor : "blue",
                        data : [null,180, 390],
             label: "Budget"
                    },
                    {
                        fillColor : "rgba(220,220,220,0)",
                        strokeColor : "green",
                        data : [null,180, 210, 405, 980, 1200, 1550],
             label: "Depences"
                    },
                ]
            }
    var options = {
                bezierCurve : false,
           pointDot: false,
                scaleFontSize: 13,
          tooltipTemplate: "<%= value %>%",
                scaleShowVerticalLines: false
    };

    var chart = document.getElementById('canvas').getContext('2d');
    var myChart = new Chart(chart).Line(data, options);

document.getElementById('legend').innerHTML = myChart.generateLegend();

CSS 样式

.chart-legend li span{
    display: inline-block;
    width: 25px;
    height: 4px;
    margin-right: 5px;
}