Javascript图表显示标签

我正在使用

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);

这是你的电话号码

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

这条线应该从2015开始，而不是0（如果你将小提琴与上面的图像进行比较，你会发现）。我尝试了

scaleStartValue

，但它不起作用

每个点上都有一个圆。我不要圆圈。我尝试了

pointStyle:line

，但它不起作用

我需要在底部显示两行Budget和Depense的信息（如所附图像所示）。我在文档中没有找到任何与此相关的内容

如果已经做到了这一点，请帮助我。提前感谢

从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>

从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>

---

既然1和2已经得到了回答，我可以问你为什么不使用最新的2.1.6版本吗

它更好更容易使用

例如，圆问题可以通过改变这一点来解决

Chart.defaults.global.elements.point.pointStyle = 'line'

最重要的是，信息会自动显示，并在图例配置主题中进行描述，例如：

Chart.defaults.global.legend.position = 'bottom'

---

根据我在1.x版本中的记忆，您必须自己创建信息，因为1和2已经得到了回答。请问您为什么不使用最新的2.1.6版本

它更好更容易使用

例如，圆问题可以通过改变这一点来解决

Chart.defaults.global.elements.point.pointStyle = 'line'

最重要的是，信息会自动显示，并在图例配置主题中进行描述，例如：

Chart.defaults.global.legend.position = 'bottom'

根据我在1.x版本中的记忆，您必须自己创建信息

以下是您需要的：

关于你的3点：

使用以下命令：

标签：[“0”、“2015”、“2016”、“2017”、“2018”、“2019”、“2020”]，

并在

数据中添加
null

使用
pointDot:false
，删除圆

在数据集中添加
标签
：

然后在
选项中添加以下内容：

legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><div class=\"legendSpan\" style=\"border-color:<%=datasets[i].strokeColor%>;\"/></div><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

或

其中
#myDiv
是图表下方html中的一个div

<div id="myDiv"></div>


var数据={
标签：[“0”、“2015”、“2016”、“2017”、“2018”、“2019”、“2020”]，
数据集：[{
标签：“预算”，
填充颜色：“rgba（2200,0）”，
strokeColor:#00f“，
pointHighlightFill:#000“，
数据：[null，180390]
}, {
标签：“Depense”，
填充颜色：“rgba（2200,0）”，
strokeColor:#0f0“，
数据：[null，1802104059801200，1550]
}, ]
}
变量选项={
点点：错，
贝塞尔曲线：错，
scaleFontSize:13，
ScaleShowVerticalline:错误，
legendTemplate:“
”
};
var chart=document.getElementById（'canvas'）.getContext（'2d'）；
var lineChart=新图表（图表）.Line（数据，选项）；
var legend=lineChart.generateLegend（）；
document.getElementById（'myDiv'）。innerHTML=legend
.legendSpan{
宽度：40px；
高度：0px；
边框：2个红色实心；
显示：内联块；
保证金：5px；
}
李先生{
显示：内联；
填充物：5px；
}

以下是您需要的：

关于你的3点：

使用以下命令：
标签：[“0”、“2015”、“2016”、“2017”、“2018”、“2019”、“2020”]，

并在
数据中添加
null

使用
pointDot:false
，删除圆

在数据集中添加
标签
：

然后在
选项中添加以下内容：

legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><div class=\"legendSpan\" style=\"border-color:<%=datasets[i].strokeColor%>;\"/></div><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

或

其中
#myDiv
是图表下方html中的一个div

<div id="myDiv"></div>


var数据={
标签：[“0”、“2015”、“2016”、“2017”、“2018”、“2019”、“2020”]，
数据集：[{
标签：“预算”，
填充颜色：“rgba（2200,0）”，
strokeColor:#00f“，
pointHighlightFill:#000“，
数据：[null，180390]
}, {
标签：“Depense”，
填充颜色：“rgba（2200,0）”，
strokeColor:#0f0“，
数据：[null，1802104059801200，1550]
}, ]
}
变量选项={
点点：错，
贝塞尔曲线：错，
scaleFontSize:13，
ScaleShowVerticalline:错误，
legendTemplate:“
”
};
var chart=document.getElementById（'canvas'）.getContext（'2d'）；
var lineChart=新图表（图表）.Line（数据，选项）；
var legend=lineChart.generateLegend（）；
document.getElementById（'myDiv'）。innerHTML=legend
.legendSpan{
宽度：40px；
高度：0px；
边框：2个红色实心；
显示：内联块；
保证金：5px；
}
李先生{
显示：内联；
填充物：5px；
}

非常感谢您！！！这是有效的。对于标签呢？非常感谢！！！这是有效的。对于标签呢？在整个应用程序中已经使用了旧版本。我不想重写所有内容。旧版本已经在整个应用程序中使用。我不想重写所有的东西。在这把小提琴里它不起作用。但是在你的小提琴中，它是有效的我已经包括了jquery。你需要这样做，或者代替jquery语句<代码>$（'#mydiv
）使用纯javascriptOk。非常感谢：
document.getElementById（'myDiv'）。innerHTML=legend
而不是
$（'#myDiv'）.html（图例）$（'#mydiv
）使用纯javascriptOk。非常感谢：
document.getElementById（'myDiv'）。innerHTML=legend
而不是
$（'#myDiv'）.html（图例）如果你不想使用jquery，我就使用JQue