ChartJS-设置最小值对于Y轴

时间:2019-10-22 07:08:43

标签: javascript charts chart.js

我有一个显示总销售数字的图表。问题是我不想显示0美元起的折线图,而是50美元起的折线图?

chart

我看到this answer通过覆盖onLoad设置解决了该问题,但是我无法使其工作。必须有明确的方法来做到这一点,不是吗?

<canvas id="salesChart" style="height: 180px;"></canvas>
<script>

  // Get context with jQuery - using jQuery's .get() method.
  var salesChartCanvas = $("#salesChart").get(0).getContext("2d");
  // This will get the first returned node in the jQuery collection.
  var salesChart = new Chart(salesChartCanvas);

  var salesChartData = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [

      {
        label: "HeartBeat",
        fillColor: "rgba(60,141,188,0.9)",
        strokeColor: "rgba(60,141,188,0.8)",
        pointColor: "#3b8bba",
        pointStrokeColor: "rgba(60,141,188,1)",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(60,141,188,1)",
        data: [89.90, 94.00, 87.64, 90.91, 93.41, 88.89, 94.17, 92.00, 93.68, 96.15, 0.00, 0.00]
      }
    ]                               
  };

  var salesChartOptions = {
    showScale: true,                        //Boolean - If we should show the scale at all
    scaleShowGridLines: true,               //Boolean - Whether grid lines are shown across the chart
    scaleGridLineColor: "rgba(0,0,0,.05)",  //String - Colour of the grid lines
    scaleGridLineWidth: 1,                  //Number - Width of the grid lines
    scaleShowHorizontalLines: true,         //Boolean - Whether to show horizontal lines (except X axis)
    scaleShowVerticalLines: true,           //Boolean - Whether to show vertical lines (except Y axis)
    bezierCurve: true,                      //Boolean - Whether the line is curved between points
    bezierCurveTension: 0.3,                //Number - Tension of the bezier curve between points
    pointDot: true,                         //Boolean - Whether to show a dot for each point
    pointDotRadius: 4,                      //Number - Radius of each point dot in pixels
    pointDotStrokeWidth: 1,                 //Number - Pixel width of point dot stroke
    pointHitDetectionRadius: 20,            //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
    datasetStroke: true,                    //Boolean - Whether to show a stroke for datasets
    datasetStrokeWidth: 2,                  //Number - Pixel width of dataset stroke
    datasetFill: true,                      //Boolean - Whether to fill the dataset with a color

    //String - A legend template
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%=datasets[i].label%></li><%}%></ul>",
    //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
    maintainAspectRatio: true,
    //Boolean - whether to make the chart responsive to window resizing
    responsive: true

  };

  //Create the line chart
  salesChart.Line(salesChartData, salesChartOptions);
</script>

0 个答案:

没有答案