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个问题。

该行应从2015开始而不是0（如果您将小提琴与上面的图像进行比较，您将会识别）。我试过了scaleStartValue，但它没有用。
每个点都有一个圆圈。我不想要这个圈子。我尝试使用pointStyle:line，但它无效
我需要在底部显示2行Budget和Depense的信息（如附图所示）。我没有在文档

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

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

Answer 2

以下是您的需求：http://jsfiddle.net/ap25v5j1/

对于你的3分：

使用此：

labels: ["0","2015", "2016", "2017", "2018", "2019", "2020"],

并在null

data

使用pointDot: false删除圈子
在数据集中添加labels：

datasets: [{
    label: "Budget",
    fillColor: "rgba(220,220,220,0)",
    strokeColor: "#00f",
    pointHighlightFill: "#000",
    data: [180, 390]
  }, {
    label: "Depense",
    fillColor: "rgba(220,220,220,0)",
    strokeColor: "#0f0",
    data: [180, 210, 405, 980, 1200, 1550]
  }, ]

然后在options中添加以下内容：

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

然后生成图例：

var chart = document.getElementById('canvas').getContext('2d');
var lineChart = new Chart(chart).Line(data, options);
var legend = lineChart.generateLegend();
$('#myDiv').html(legend); //jQuery

或

document.getElementById('myDiv').innerHTML = legend; //js

#myDiv是您图表下方html中的div

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

你需要设计风格：

.legendSpan {
  width: 40px;
  height: 0px;
  border: 2px red solid;
  display: inline-block; 
  margin: 5px;
}

.line-legend li{
  display: inline;
  padding: 5px;
}

＆＃13;

var data = {
  labels: ["0", "2015", "2016", "2017", "2018", "2019", "2020"],
  datasets: [{
    label: "Budget",
    fillColor: "rgba(220,220,220,0)",
    strokeColor: "#00f",
    pointHighlightFill: "#000",
    data: [null, 180, 390]
  }, {
    label: "Depense",
    fillColor: "rgba(220,220,220,0)",
    strokeColor: "#0f0",
    data: [null, 180, 210, 405, 980, 1200, 1550]
  }, ]
}
var options = {
  pointDot: false,
  bezierCurve: false,
  scaleFontSize: 13,
  scaleShowVerticalLines: 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>"
};

var chart = document.getElementById('canvas').getContext('2d');
var lineChart = new Chart(chart).Line(data, options);
var legend = lineChart.generateLegend();
document.getElementById('myDiv').innerHTML = legend;

＆＃13;

.legendSpan {
  width: 40px;
  height: 0px;
  border: 2px red solid;
  display: inline-block;
  margin: 5px;
}
.line-legend li {
  display: inline;
  padding: 5px;
}

＆＃13;

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="canvas" width="420" height="350"></canvas>
<div id="myDiv"></div>

＆＃13;

Answer 3

由于已经回答了1和2，我可以问为什么不使用最新的2.1.6版本？

使用起来更好更容易

http://www.chartjs.org/docs/

例如，通过更改此

可以解决圆问题

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

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

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

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

Javascript图表显示标签

3 个答案: